如何根據圖像對所有LI下的src名稱進行排序？

我得到了UL這樣的：如何根據圖像對所有LI下的src名稱進行排序？

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

可我知道我該如何寫代碼？

來源

2012-10-10 user1733994

以何種方式要改變順序，按字母順序？ – Sem

看到類似的問題：http://stackoverflow.com/questions/3050830/reorder-list-elements-jquery – karaxuna

你可以寫或者使用jQuery插件來排序元素。然後調用它。
帶有示例jquery插件的好教程：
http://james.padolsey.com/javascript/sorting-elements-with-jquery/ – 2012-10-10 07:47:11

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

來源

2012-10-10 07:48:54 karaxuna

這是我需要的。但爲什麼排序後我的列表變空了？ – user1733994

這裏是jsfiddle：http://jsfiddle.net/tzRe7/1/ – karaxuna

你的意思是變空了嗎？ – karaxuna

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

來源

2012-10-10 08:18:32

-1

你可以試試這個：

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

小提琴here

來源

2012-10-10 09:43:32 Bruno

downvote的原因將是很好的，即使它是一個有效的。 – Bruno

如何根據圖像對所有LI下的src名稱進行排序？

回答

相關問題