0

私は、そのような基準に従ってページ内のクラス「order_me」を持つすべてのdivをソートするjQueryコードに取り組んでいます。

これらの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の数は同じであることに注意してください。

前もって感謝します。よろしく。JV

4

2 に答える 2

1

Let me give a shot:

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++;
    }
}

basicly I captured the number of divs in the first row to use as limit I loop through the array, append the div to the row based on rowIndex and add to the counter. when counter reaches limit we start to append divs to the next row by increasing rowIndex, until all elements are appended to the right place.

于 2012-09-25T17:13:08.897 に答える
1

How about something like this? 

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 に答える