how to sort by image src name for all LI under a UL?

Question

I got a UL like this:

<ul id='mylist'>
<li id='1'><img src='kids.jpg'>kids.jpg</li>
<li id='2'><img src='apple.jpg'>apple.jpg</li>
<li id='3'><img src='toys.jpg'>toys.jpg</li>
<li id='4'><img src='love.jpg'>love.jpg</li>
</ul>

I want to sort it using jquery/javascript like this:

<ul id='mylist'>
<li id='2'><img src='apple.jpg'>apple.jpg</li>
<li id='1'><img src='kids.jpg'>kids.jpg</li>
<li id='4'><img src='love.jpg'>love.jpg</li>
<li id='3'><img src='toys.jpg'>toys.jpg</li>
</ul>

May I know how do I write the code?

In what way do you want to change the order, alphabetically? — Sem, Oct 10 '12 at 07:35
See similiar question: http://stackoverflow.com/questions/3050830/reorder-list-elements-jquery — karaxuna, Oct 10 '12 at 07:40
you can write Or use jQuery plugin that sorting element. then call it.
good tutorial with a sample jquery plugin:
http://james.padolsey.com/javascript/sorting-elements-with-jquery/ — , Oct 10 '12 at 07:47
You can use the following plugin : http://tinysort.sjeiti.com/#xval — Laurent Brieu, Oct 10 '12 at 07:36

score 1 · Accepted Answer · answered Oct 10 '12 at 07:48

1

$(document).ready(function() {

    var ul = $('ul#mylist'),
    li = ul.children('li');

    li.detach().sort(function(a,b) {
        return alphabetical($(a).children('img').attr('src'), $(b).children('img').attr('src'));
    });

    ul.append(li);
});

function alphabetical(a, b)
{
     var A = a.toLowerCase();
     var B = b.toLowerCase();
     if (A < B){
        return -1;
     }else if (A > B){
       return  1;
     }else{
       return 0;
     }
}

answered Oct 10 '12 at 07:48

karaxuna

26,752
13
82
117

this is what i need. but why my list become empty after sorting? – user1733994 Oct 10 '12 at 08:18
what you mean by becoming empty? – karaxuna Oct 10 '12 at 08:26
maybe something is wrong with my code. but your code works fine. thanks! – user1733994 Oct 10 '12 at 11:08

score 0 · Answer 2 · answered Oct 10 '12 at 08:18

<ul id='mylist'>
<li id='1'><img src='kids.jpg'>kids.jpg</li>
<li id='2'><img src='apple.jpg'>apple.jpg</li>
<li id='3'><img src='toys.jpg'>toys.jpg</li>
<li id='4'><img src='love.jpg'>love.jpg</li>
</ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var starting_array = new Array();
var temp_array = new Array();
for(var i = 1 ; i <= 4 ;i++){
starting_array[i] =  $('#'+i).find('img').attr('src');
temp_array[i] = $('#'+i).find('img').attr('src');
}

temp_array.sort();

$('#mylist').html('');
var li_data = '';
for(var j=0; j< temp_array.length-1 ; j++ ){
     var id = $.inArray(temp_array[j] ,starting_array);
     li_data += '<li id="'+ id +'"><img src="'+ temp_array[j] +'" > '+ temp_array[j]+' </li>'; 
}
$('#mylist').html(li_data);

</script>

score -1 · Answer 3 · answered Oct 10 '12 at 09:43

-1

You can try this:

var items = $("#mylist > li").detach().get( ); 

items.sort( srcSort );
$("#mylist").append( items );


function srcSort( a, b ) {

    var _a = $(a).children("img").prop("src").toUpperCase();
    var _b = $(b).children("img").prop("src").toUpperCase();

    if( _a > _b ) return 1;
    if( _a < _b ) return -1;
    return 0;
}

fiddle here

answered Oct 10 '12 at 09:43

Bruno

5,772
1
26
43

a reason for the downvote would be nice, even if it is a valid one. – Bruno Oct 10 '12 at 10:08

how to sort by image src name for all LI under a UL?

3 Answers3