是否可以使用JavaScript或純jQuery對<li>元素重新排序。所以，如果我有如下愚蠢的名單：重新排列列表元素 - jQuery？
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Cheese</li>
</ul>
我將如何移動列表元素？像列表元素Cheese之前的列表元素Foo或移動Foo到Bar之後。
可能嗎？如果是這樣，怎麼樣？
var ul = $("ul");
var li = ul.children("li");
li.detach().sort();
ul.append(li);
這是一個簡單的例如<li>節點按其排序以某種默認順序。我在調用detach以避免刪除與li節點相關的任何數據/事件。
您可以傳遞一個函數進行排序，並使用自定義比較器進行排序。
li.detach().sort(function(a, b) {
// use whatever comparison you want between DOM nodes a and b
});
看一看jQuery UI的排序
雖然非常酷，我不需要用戶能夠訴諸手段，我只是想知道，如果我可以通過編程方式，使用jQuery或只是JavaScript。 – Alex 2010-06-16 05:09:35
啊，我明白了！ （'ul＃list li：eq（1）'）;' – 2010-06-16 06:42:37
這樣的事情？
var li = $('ul li').map(function(){
return this;
}).get();
$('ul').html(li.sort());
我多少有些失落，你可能會想這樣的事情...
$('ul#list li:first').appendTo('ul#list'); // make the first to be last...
$('ul#list li:first').after('ul#list li:eq(1)'); // make first as 2nd...
$('ul#list li:contains(Foo)').appendTo('ul#list'); // make the li that has Foo to be last...
這行看起來不工作'$（'ul＃list li：first'）。工作..有人可以演示這個在jsfiddle行動？ – 2012-12-30 18:59:24
如果有人正在通過一次移動它們向上/向下一些列表中的一個步驟重新排序元素...
//element to move
var $el = $(selector);
//move element down one step
if ($el.not(':last-child'))
$el.next().after($el);
//move element up one step
if ($el.not(':first-child'))
$el.prev().before($el);
//move element to top
$el.parent().prepend($el);
//move element to end
$el.parent().append($el);
這就是爲什麼我愛stackoverflow。謝謝@alexg – iggy2012 2013-12-17 20:48:46
jQuery最喜歡的事情之一是如此快速地編寫微小的附加組件是多麼容易。
在這裏，我們創建了一個小插件，它包含一個選擇器數組，並使用它來排序目標元素的子項。
// Create the add-on
$.fn.orderChildren = function(order) {
\t this.each(function() {
\t \t var el = $(this);
\t \t for(var i = order.length - 1; i >= 0; i--) {
\t \t \t el.prepend(el.children(order[i]));
\t \t }
\t });
\t return this;
};
// Call the add-on
$(".user").orderChildren([
\t ".phone",
\t ".email",
\t ".website",
\t ".name",
\t ".address"
]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="user">
\t <li class="name">Sandy</li>
\t <li class="phone">(234) 567-7890</li>
\t <li class="address">123 Hello World Street</li>
\t <li class="email">[email protected]</li>
\t <li class="website">https://google.com</li>
</ul>
<ul class="user">
\t <li class="name">Jon</li>
\t <li class="phone">(574) 555-8777</li>
\t <li class="address">123 Foobar Street</li>
\t <li class="email">[email protected]</li>
\t <li class="website">https://apple.com</li>
</ul>
<ul class="user">
\t <li class="name">Sarah</li>
\t <li class="phone">(432) 555-5477</li>
\t <li class="address">123 Javascript Street</li>
\t <li class="email">[email protected]</li>
\t <li class="website">https://microsoft.com</li>
</ul>功能向後遍歷數組，並使用.prepend使得任何未選擇的元件推到終點。
這只是我一直在尋找 - 感謝分享@SandyGifford – 2016-06-26 08:16:07
我不能得到這個從你的問題 – Irfan 2011-11-13 06:14:24
適合我。這裏是jsfiddle示例：http://jsfiddle.net/Afbrt/ – 2012-05-10 16:28:58
美麗的解決方案。正是我所需要的。謝謝你好，先生在這個美妙的星期五下午 – 2013-10-04 18:56:14