Question

I’m working on a jQuery code which sorts all the divs with class “order_me” in a page according to such a criterion.

These divs are arranged in container rows made by divs, i.e.:

<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> 

Once that I get the list of divs to be ordered, i.e.

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

and then I convert the list as JS Array and I sort it like follows:

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

Since I have the list of already sorted divs: how can I efficiently put the sorted divs in the rows?

Of course, if you have something else in mind show me your idea.

Note that the last row could have less divs, while the others have the same number of divs.

Thanks in advance.
Regards. JV

Answer 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.