jQuery颠倒了子元素的顺序

Question

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

例如，如果我从：

开始

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

我想最终得到这个：

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

Answer 1

var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());

Answer 2

编辑：Anurag's answer比我好。

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

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

Answer 3

试试这个：

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

Answer 4

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

$('#btnrev').click(function(){

$('ul').html($('ul').find('li').get().reverse());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<button id="btnrev">
click
</button>

Answer 5

oneliner：

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

Answer 6

没有Jquery解决方案

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