使用 jQuery 对位于单独 div 中的 DOM 元素进行排序

Question

我正在研究一个jQuery代码，它根据这样的标准对页面中所有带有类"order_me"的div进行排序。

这些div 排列在由div 组成的容器行中，即：

<div id="container">
    <div class="row">
      <div  class="order_me"></div>
      <div  class="order_me"></div>
      <div  class="order_me"></div>
    </div> 
    <div class="row">
       <div  class="order_me"></div>
       <div  class="order_me"></div>
       <div  class="order_me"></div>
    </div>
    <div class="row">
       <div  class="order_me"></div>
    </div>
</div> 

一旦我得到了要订购的div列表，即

var $lst = $('#container').find('.order_me')); 

然后我将列表转换为 JS 数组，并按如下方式排序：

var array = jQuery.makeArray($lst);
array.sort(sortingFunction);

由于我有已经排序的div 列表：如何有效地将排序的div 放在行中？

当然，如果你有别的想法，告诉我你的想法。

请注意，最后一行的div 可能较少，而其他行的div 数量相同。

提前谢谢。问候。合资

Answer 1

让我试一试：

var $rows = $('.row');
var limit = $($rows[0]).find('.order_me').length;
var $lst = $('#container').find('.order_me'));
var array = jQuery.makeArray($lst);
array.sort(sortingFunction);
var count = 0;
var rowIndex = 0;
for(var i in array){
    var div = array[i];
    $($rows[rowIndex]).append($(div));
    count++;
    if(count >= limit){
        count = 0;
        rowIndex++;
    }
}

基本上我捕获了第一行中的div数量以用作限制我遍历数组，根据 rowIndex 将div 附加到行并添加到计数器中。当计数器达到限制时，我们开始通过增加 rowIndex 将div 附加到下一行，直到所有元素都附加到正确的位置。

Answer 2

这样的事情怎么样？

var $lst = $('#container').find('.order_me'));
var array = jQuery.makeArray($lst);
array.sort(sortingFunction);
$('#container').html(array); // add them to container
for(var i=0; i < $divs.length;i+=3){ // loop through and wrap them in divs
   $('#container div.order_me').slice(i,i+3).wrapAll('<div class="row"></div>');  
}​

http://jsfiddle.net/FkkGj/