jQuery反转子元素的顺序

使用jQuery反转子元素顺序的最佳方法是什么

例如，如果我从以下内容开始：

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

A
B
C

我想以这个结尾：

<ul>
  <li>C</li>
  <li>B</li>
  <li>A</li>
</ul>

C
B
A

编辑：比我的好

ul = $('#my-ul'); // your parent ul element
ul.children().each(function(i,li){ul.prepend(li)})

如果对包含多个元素的对象调用.prepend（），将在第一个元素之后为其他目标元素克隆要追加的元素，因此请确保仅选择单个元素。

尝试以下操作：

$(function() {
  $.fn.reverse = [].reverse;
  var x = $('li');
  $('ul').empty().append(x.reverse());
});

---

在我面前给出的所有答案都是最好的，但你也可以试试这个

$（'#btnrev'）。单击（函数（）{
$（'ul'）.html（$（'ul'）.find（'li'）.get（）.reverse（））；
});


一,
二,
三,
四,

点击
oneliner：

$('ul').append($('ul>').detach().get().reverse());

没有Jquery解决方案
并使用类似于：

document.querySelector('ul').reverse(); // children are now reversed

你是在做分类的事情吗？如果没有，你可以做类似的事情，我这里不是真的排序，但我有一个单独的任务，将涉及排序。谢谢你的提示。我不认为这会去除列出的元素。所以你会得到一个反向列表和原始列表。如果我错了，请纠正我。@Matt-DOM元素只能存在于一个位置，因此在本例中，它是移动的，而不是复制的。@Anurag-有趣。很高兴知道。谢谢。事实上，您可以复制并粘贴代码，然后在此页面上尝试，然后看到菜单栏会自动反转。还有一点需要说明：如果您在包含多个元素的对象上调用.prepend（），将在第一个元素之后为其他目标元素克隆要追加的元素。因此，
$（'.many element'）.prepend（$（'.#unique element'）
将创建id为#unique element的元素副本。上面的示例将在包含多个
ul
元素的页面上执行此操作，但这不会：
uls=$（'ul'）；//所有ul元素uls.each（function（i，ul）{$（ul）.children（）.each（function（i，li）{$（ul）.prepend（li）})}）
您正在使用
[]
创建一个未使用的数组。使用
array.prototype.reverse
而不是
[].reverse
？
.empty
是多余的-每个元素对象只存在一次，当它放回新位置时，会自动从DOM中的原始位置删除。我以前从未注意到这个答案，但我同意它比我的答案好。我的只是说明了append/pr的一个有趣属性一个问题：
listItems.reverse（）；
和
listItems.get（）.reverse（）之间有什么区别
？我不明白为什么第一个不起作用，ListItems不是一个
元素的数组吗？ListItems是jQuery对象的一个实例，它包装了一个DOM元素的数组。它不是一个常规数组，为什么我们调用get（）呢在它上面得到一个我们知道可以反转的普通数组。@tfmontague-你有性能基准来证明吗？我不同意这个说法。如果使用
.html（）
不知何故，结果明显快于重新排序节点元素，并且您的应用程序需要性能，而此元素重新排序是一个瓶颈，那么无论如何，请继续使用
html（）
。我不想使用
html（）
的原因是不正确。
html（）
将从头开始重新创建所有这些元素，任何未序列化的状态（如事件处理程序）都将丢失。因此，这将不再是一个简单的重新排序操作，而是一个具有其他副作用的更具破坏性的操作。
Element.prototype.reverse = function(){
    var c = [].slice.call(this.children).reverse();
    while (this.firstChild) { this.removeChild(this.firstChild); };
    c.forEach(function( child ){ this.appendChild(child) }.bind(this))
}

document.querySelector('ul').reverse(); // children are now reversed