javascript - ULの下のすべてのLIの画像ソース名でソートする方法は?

Question

次のような UL を取得しました。

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

次のようにjquery/javascriptを使用してソートしたい：

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

コードの書き方を教えてください。

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

Answer 2

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

Answer 3

これを試すことができます：

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

ここでフィドル