How can I use javascript to sort divs by numbered classes?

Question

<pre>
    <div>
      <div class="abc grid-row">
        <div class="grid-cell position_2">
            <img src="#">
        </div>
        <div class="grid-cell position_1">
            <img src="#">
        </div>
      </div>
      <div class="abc grid-row">
        <div class="grid-cell position_2">
            <img src="#">
        </div>
        <div class="grid-cell position_3">
            <img src="#">
        </div>
        <div class="grid-cell position_1">
            <img src="#">
        </div>
      </div>
      <div class="def grid-row">
        <div class="grid-cell position_2">
            <img src="#">
        </div>
        <div class="grid-cell position_1">
            <img src="#">
        </div>
      </div>
    </div>
</pre>

I would like to iterate through each grid-row to sort the child divs by the position class in numerical order. So position_1 will always be the first child div in each grid row.

When I tried doing this with jQuery, the child divs were being sorted into other rows, which I need to prevent. How can I achieve this?

Answer 1

uses sort on the grid-cell within each grid-row

 $('.grid-row').each(function() { var cells = $('.grid-cell', this).sort(function(a, b) { return parseInt(a.className.match(/[0-9]+/)[0]) > parseInt(b.className.match(/[0-9]+/)[0]); }); $(this).html(cells); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class="abc grid-row"> <div class="grid-cell position_2"> 2 </div> <div class="grid-cell position_1"> 1 </div> </div> <div class="abc grid-row"> <div class="grid-cell position_2"> 2 </div> <div class="grid-cell position_3"> 3 </div> <div class="grid-cell position_1"> 1 </div> </div> <div class="def grid-row"> <div class="grid-cell position_2"> 2 </div> <div class="grid-cell position_1"> 1 </div> </div> </div> 

Answer 2

I know you asked about a javascript solution, but you might consider looking at Flexbox too. You could do something like this:

 .abc { display:flex; flex-direction:column; } 

 <div class="abc grid-row"> <div class="grid-cell position_2" style="order:2"> 2 </div> <div class="grid-cell position_3" style="order:3"> 3 </div> <div class="grid-cell position_1" style="order:1"> 1 </div> </div> 

Answer 3

$('.grid-row').each(function(){
    var $row = $(this), $cells = $();  //create an empty list
    for(var i=0; i<5; ++i){
        //append the items for each "position" to the list
        $.merge($cells, $row.find("> .grid-cell.position_"+i));
    }
    //append the cells in the right order to the row
    $row.append($cells);
})

or

//a utility to fetch the position
function getPosition(node){
    var m = node.className.match(/\bposition_(\d+)\b/);
    return +(m && m[1] || -Infinity);
}

$('.grid-row').each(function(){
    var $row = $(this);
    $row.find('> .grid-cell').sort(function(a, b){
        return getPosition(a) - getPosition(b);
    }).appendTo($row);
});