0

我正在研究一个 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 数量相同。

提前致谢。问候。合资企业

4

2 回答 2

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 附加到下一行，直到所有元素都附加到正确的位置。

于 2012-09-25T17:13:08.897 回答
1

这样的事情怎么样？

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/

于 2012-09-25T17:19:28.207 回答