jQuery的重新排序的HTML元素

-2

<a href="#"><img src="image1.jpg" /></a> 
<a href="#"><img src="image2.jpg" /></a> 
<a href="#"><img src="image3.jpg" /></a> 
<a href="#"><img src="image4.jpg" /></a> 
<a href="#"><img src="image5.jpg" /></a>

我要重新排序，以

<a href="#"><img src="image5.jpg" /></a> 
<a href="#"><img src="image1.jpg" /></a> 
<a href="#"><img src="image2.jpg" /></a> 
<a href="#"><img src="image3.jpg" /></a> 
<a href="#"><img src="image4.jpg" /></a>

我如何使用jQuery實現這一目標（無插件如果可能的話）。

感謝

來源

2013-02-21 LeBlaireau

第一的似乎更好下令給我。 – 2013-02-21 15:38:18

我建議：

$('img').last().parent().insertBefore($('img').first().parent());

雖然與就爲他們重新排序的具體標準沒有信息，就很難提供一個明確，有效的解決方案。

以上假定您希望基於圖像元素重新排列元素（因爲這是出現最明顯的一個索引/編號），但使用a代替：

$('a').last().insertBefore($(this).prevAll(':last'));

來源

2013-02-21 15:39:03

爲什麼不使用一個而不是img？ – 2013-02-21 15:40:14

因爲'a'可能在頁面的任何位置。但是，他可以使用類*作爲* a，以確保正確的錨點與正確的圖像相關聯。只是一個想法。 :) – 2013-02-21 15:41:09

假如你有這樣的HTML：

<div id=parent> 
    <a href="#"><img src="image5.jpg" /></a> 
    <a href="#"><img src="image1.jpg" /></a> 
    <a href="#"><img src="image2.jpg" /></a> 
    <a href="#"><img src="image3.jpg" /></a> 
    <a href="#"><img src="image4.jpg" /></a> 
    </div>

並且要通過圖像的SRC命令，那麼你可以這樣做：

function compareStrings(a,b) { 
    if (a>b) return 1; 
    else if (a<b) return -1; 
    return 0; 
} 
$('#parent').append($('a').detach().sort(function(a,b){ 
    return compareStrings($('img',a).attr('src'), $('img',b).attr('src')); 
}));

Demonstration

來源

2013-02-21 15:53:09

很好，推斷到其他排序順序 – 2014-11-07 14:24:52

我發現這個代碼工作得非常好（不是我）：
博文：http://james.padolsey.com/javascript/sorting-elements-with-jquery/
來源：http://github.com/padolsey/jQuery-Plugins/tree/master/sortElements/

例子：（從博客轉述）

<ul> 
    <li>Banana</li> 
    <li>Carrot</li> 
    <li>Apple</li> 
</ul>

包含庫，然後運行：

$('li').sortElements(function(a, b){ 
    return $(a).text() > $(b).text() ? 1 : -1; 
});

結果：

<ul> 
    <li>Apple</li> 
    <li>Banana</li> 
    <li>Carrot</li> 
</ul>

來源

2013-10-05 01:28:01 TJB

jQuery的重新排序的HTML元素

回答

相關問題