Как отсортировать div по их идентификатору, используя jQuery?

Question

У меня есть набор div со случайными идентификаторами:

<div id="container">
   <div id="2"></div>
   <div id="9"></div>
   <div id="7"></div>
   <div id="1"></div>
   <div id="4"></div>
</div>

Существует ли быстрый способ сортировки по значениям идентификатора с помощью jQuery? Спасибо.

Answer 1

Я бы использовал плагин tinysort:

http://tinysort.sjeiti.com/

В вашем случае это будет что-то вроде:

$("#container > div").tsort("",{attr:"id"});

Answer 2

Существуют плагины и т.п. для сортировки элементов. Если вы планируете на самом деле изменить порядок элементов DOM, вам, вероятно, следует использовать один из них.

Если вы просто хотите отсортированный список элементов div, вы можете использовать Javascript - поскольку массивы можно сортировать с помощью пользовательской функции сравнения. Вы можете преобразовать выбранный набор <div> s в массив, используя toArray(), а затем отсортировать их, используя этот механизм.

$('#container > div').toArray().sort( function(a,b) { a.id - b.id } );

Вы также можете использовать методы detach() и appendTo() для удаления и повторной вставки элементов в отсортированном порядке. Однако это может быть не самый эффективный способ переупорядочения элементов DOM.

Answer 3

Попробуйте мой плагин jquery $.toArrayouter, используя библиотеку Underscore.

$('#container').html(_.sortBy($('#container>div').toArrayouter(),function (name) {return name} ).join(''))

Демо: http://jsfiddle.net/abdennour/fDZjR/1/