JQuery, изменяющий порядок дочерних элементов

Каков наилучший способ изменить порядок дочерних элементов с помощью jQuery.

Например, если я начинаю с:

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

Я хочу закончить с этим:

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

Ответ 1

Изменить: Ответ Анурага лучше моего.

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

Если вы вызываете .prepend() для объекта, содержащего более одного элемента, добавляемый элемент будет клонирован для дополнительных целевых элементов после первого, поэтому убедитесь, что вы выбираете только один элемент.

Ответ 2

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

Ответ 3

Попробуйте следующее:

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

Ответ 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>

Ответ 5

один лайнер:

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

Ответ 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