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 Array，我将其排序如下：

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

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

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

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

提前致谢。问候。 JV

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/

使用jQuery命令位于不同div中的DOM元素

2 个答案: