Question

I have this code:

<div id="main-container">
    <div class="comunicato-item">
        <div class="item item-1">Marco</div>
        <div class="item item-2">3</div>
        <div class="item item-2">2012</div>
    </div>

    <div class="comunicato-item">
        <div class="item item-1">Andrea</div>
        <div class="item item-2">2</div>
        <div class="item item-2">2013</div>
    </div>  

    <div class="comunicato-item">
        <div class="item item-1">Paul</div>
        <div class="item item-2">9</div>
        <div class="item item-2">2003</div>
    </div>  
</div>

and I’d like to order the comunicato-item items due to the (for example) .item.item-2 element value. So the result should be, after the sorting:

<div id="main-container">
    <div class="comunicato-item row">
        <div class="item item-1">Andrea</div>
        <div class="item item-2">2</div>
        <div class="item item-2">2013</div>
    </div>  

    <div class="comunicato-item row">
        <div class="item item-1">Marco</div>
        <div class="item item-2">3</div>
        <div class="item item-2">2012</div>
    </div>

    <div class="comunicato-item row">
        <div class="item item-1">Paul</div>
        <div class="item item-2">9</div>
        <div class="item item-2">2003</div>
    </div>  
</div>

Is it possible with jquery? Tried with somethings like this:

var a = [];
$(".comunicato-item .item.item-2").each(function(i,e){
    a.push(e);
});
$.each(a.sort(),function(i,e){
    $("#"+e).appendTo('#main-container');
});

but it fails! Any idea?

Answer 1

You can sort the collection like this using the .sort function. Theres no need to loop through and push it into an array since jQuery already stores the elements in an array. There’s also no need to loop through and append the elements

var x = $('#main-container > .comunicato-item').sort(function(a,b){
    var f = +$(a).find('.item-2:first').text();
    var s = +$(b).find('.item-2:first').text();
    return f-s; // no need for if/else because these are numbers
});
$('#main-container').html(x);
// or $('#main-container').append(x);
// or x.appendTo('#main-container');

http://jsfiddle.net/SuCyz/

EDIT

if sorting by words you will have to use if/else

var x = $('#comunicato-items > .comunicato-item').sort(function(a,b){
    var f = $(a).find('.item-2:first').text();
    var s = $(b).find('.item-2:first').text();
    return f > s ? 1 : f < s ? -1 : 0;   
});
$('#comunicato-items').html(x);

where

f > s ? 1 : f < s ? -1 : 0;  

equal to

if(f > s){
   return 1;
}else if(f < s){
   return -1;
}else{
   return 0;
}

http://jsfiddle.net/u5Nxw/