jQuery – 按className排序DIV
我有一个DIV列表，像这样：
4 3 5 1 2 我想用jQuery对它们进行排序
在服务器端，我可以定义所需的订单，并在类名中包含此订单：
catX- 4.2
我希望能够调用第一个订单（在我的例子中，这个DIV将在第4个位置），或者第二个订单（它将在第2个位置）：这解释了“4.2”
所以，如果我打电话给OrderDIV(1)我将会这样：
1 2 3 4 5
如果我打电话给OrderDIV(2)我会这样：
5 4 3 2 1
（我需要添加更多订单，例如：catX-4.2.5.6.2）
非常感谢您的帮助！
你在中途改变了要求……就像真正的客户一样。 更新版本附带一些注释。 只是为了确认，前面有两个“可配置”变量。
classPrefix：用于确定排序顺序的类的“前缀”（在本例中为’cat’）listElementSelector：用于获取要排序的列表的jQuery选择器。
function OrderDIV(position) { var classPrefix = 'cat'; var listElementSelector = '#list'; // -- Decrement the position to make it 0 based position--; // -- Parses the "position" section from the given classes, and // then the position at the specific index requested. var parsePosition = function(classes, pos) { // -- Split the "classes" into an array. var classList = classes.split(' '); // -- Determine which of the "classes" starts with the prefix we want. for( var i in classList ) { if( classList[i].substr(0, classPrefix.length) == classPrefix ) { // -- Strip out the positions section, and split it. var positions = classList[i].split('-')[1].split('.'); // -- return the one position we want return positions[pos]; } } // -- In the event that we don't find the class we're looking for ... return -1; } // -- Compares div A to div B, and returns an indicator of the order var funcSort = function(a, b) { // -- Use "parsePosition" to determine the sortable criteria from the classes. var compA = parsePosition($(a).attr('class'), position); var compB = parsePosition($(b).attr('class'), position); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }; // -- Select the list element. var list = $(listElementSelector); // -- Select the list items, and return them as an array. var listitems = list.children('div').get(); // -- Sort the array using the "funcSort". listitems.sort(funcSort); // -- Go through each of the array entries, and "append" them to the list container // (this moves them to the 'back' of the list) $.each(listitems, function(idx, itm) { list.append(itm); }); }
jQuery抽象Array.prototype.sort()方法，以便您可以在包装集上使用它：
var OrderDIV = function(asc) { $('div#list').children().detach().sort(function(a,b) { return asc ? (+a.textContent) - (+b.textContent) : (+b.textContent) - (+a.textContent); }).appendTo(document.body); } OrderDIV(0);
演示 ： http ： //jsfiddle.et/Ls2kd/9/
为简单起见，我按其内容订购了
节点。 如果您需要使用ID它应该不是问题。 只需访问a.id并删除比较所需的部分（例如regex）。
另外要提一下，InternetExplorer并不知道.textContent因此它应该是a.textContent || a.text a.textContent || a.text 。
jQuery.fn.sortElements = (function(){ var sort = [].sort; return function(comparator, getSortable) { getSortable = getSortable || function(){return this;}; var placements = this.map(function(){ var sortElement = getSortable.call(this), parentNode = sortElement.parentNode, // Since the element itself will change position, we have // to have some way of storing its original position in // the DOM. The easiest way is to have a 'flag' node: nextSibling = parentNode.insertBefore( document.createTextNode(''), sortElement.nextSibling ); return function() { if (parentNode === this) { throw new Error( "You can't sort elements if any one is a descendant of another." ); } // Insert before flag: parentNode.insertBefore(this, nextSibling); // Remove flag: parentNode.removeChild(nextSibling); }; }); return sort.call(this, comparator).each(function(i){ placements[i].call(getSortable.call(this)); }); }; })();
根据您的需要使用此排序条件：
function sortCriteria(k) { var regex = /\b\d+/g; return function(a, b){ return parseInt(a.id.match(regex)[k]) > parseInt(b.id.match(regex)[k]) ? 1 : -1; } } $("#list >").sortElements(sortCriteria(0));