éléments de liste de réorganisation - jQuery?

Question

Est-il possible de réorganiser <li> éléments avec JavaScript ou pure jQuery. Donc, si j'ai une liste stupide comme le suivant:

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

Comment est-ce que je déplacerais les éléments de liste autour? Comme mettre l'élément de la liste avec Cheese avant l'élément de liste avec Foo ou déplacer Foo à après Bar.

Est-ce possible? Si c'est le cas, comment?

Answer 1

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

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

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

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

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

Answer 2

Jetez un oeil à jquery ui triables

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

Answer 3

quelque chose comme ça?

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

demo

j'étais un peu perdu, vous pouvez vouloir 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 il here1 et here2

Answer 4

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

Answer 5

Si quelqu'un cherche à réorganiser les éléments en les déplaçant vers le haut/bas une liste d'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 6

L'une de mes choses préférées à propos de jQuery est à quel point il est facile d'écrire si vite de petits modules.

Ici, nous avons créé un petit add-on qui prend un tableau de sélecteurs, et l'utilise pour ordonner les enfants des éléments cibles.

// Create the add-on 
 

 
$.fn.orderChildren = function(order) { 
 
\t this.each(function() { 
 
\t \t var el = $(this); 
 
\t \t for(var i = order.length - 1; i >= 0; i--) { 
 
\t \t \t el.prepend(el.children(order[i])); 
 
\t \t } 
 
\t }); 
 
\t return this; 
 
}; 
 

 

 
// Call the add-on 
 

 
$(".user").orderChildren([ 
 
\t ".phone", 
 
\t ".email", 
 
\t ".website", 
 
\t ".name", 
 
\t ".address" 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="user"> 
 
\t <li class="name">Sandy</li> 
 
\t <li class="phone">(234) 567-7890</li> 
 
\t <li class="address">123 Hello World Street</li> 
 
\t <li class="email">someone@email.com</li> 
 
\t <li class="website">https://google.com</li> 
 
</ul> 
 
<ul class="user"> 
 
\t <li class="name">Jon</li> 
 
\t <li class="phone">(574) 555-8777</li> 
 
\t <li class="address">123 Foobar Street</li> 
 
\t <li class="email">jon@email.com</li> 
 
\t <li class="website">https://apple.com</li> 
 
</ul> 
 
<ul class="user"> 
 
\t <li class="name">Sarah</li> 
 
\t <li class="phone">(432) 555-5477</li> 
 
\t <li class="address">123 Javascript Street</li> 
 
\t <li class="email">sarah@email.com</li> 
 
\t <li class="website">https://microsoft.com</li> 
 
</ul>

La fonction boucle vers l'arrière à travers le réseau et utilise .prepend de sorte que tous les éléments non sélectionnés sont poussés à la fin.