réorganiser les éléments de la liste - jQuery?

Question

Est-il possible de réordonner les éléments <li> avec JavaScript ou jQuery pur. Donc, si j'ai une liste idiote comme celle-ci:

 <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Cheese</li>
</ul>
 

Comment pourrais-je déplacer les éléments de la liste? Comme mettre l'élément de liste avec Cheese avant l'élément de liste avec Foo ou déplacer Foo après Bar .

C'est possible? Si c'est le cas, comment?

Answer 1

 var ul = $("ul");
var li = ul.children("li");

li.detach().sort();
ul.append(li);
 

Ceci est un exemple simple où les nœuds <li> sont triés dans un ordre par défaut. J'appelle detach pour éviter de supprimer les données / événements associés aux nœuds li.

Vous pouvez transmettre une fonction pour trier et utiliser un comparateur personnalisé pour effectuer également le tri.

 li.detach().sort(function(a, b) {
   // use whatever comparison you want between DOM nodes a and b
});
 

Answer 2

Si quelqu'un cherche à réorganiser des éléments en les déplaçant vers le haut ou le bas d'une liste, une étape à la fois ...

 //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);
 

Answer 3

Voici un plugin jQuery pour vous aider avec cette fonctionnalité: http://tinysort.sjeiti.com/

Answer 4

quelque chose comme ça?

 ​var li = $('ul li').map(function(){
              return this;
         })​.get();
$('ul').html(li.sort());
 

démo

J'étais un peu perdu, vous voudrez peut-être quelque chose comme ça ...

 $('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...
 

plus de ça ici1 et ici2

Answer 5

Regardez jquery ui sortable

http://jqueryui.com/demos/sortable/