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