javascript looping à travers les attributs li et les valeurs de changement par article

Question

Je veux faire une boucle à travers un tas d'éléments <li> et mettre à jour la valeur qui s'y trouve, et le montrer sur le document.

La raison pour laquelle je fais cela est parce que je veux trier une liste d'éléments dans un ordre. Je fais cela en utilisant Sortable dans JQuery.

<li> 1 </li> 
<li> 2 </li> 
<li> 3 </li> 
<li> 4 </li> 
<li> 5 </li> 

l'ordre peut devenir:

<li> 3 </li> 
    <li> 1 </li> 
    <li> 4 </li> 
    <li> 2 </li> 
    <li> 5 </li> 

en cliquant sur un bouton je voudrais ma fonction JS pour revenir à 1,2,3,4,5 la valeur des éléments li. Il vaut la peine de noter que je ne cherche pas une solution pour revenir à la façon dont la liste était avant.

Merci.

Answer 1

Cela devrait fonctionner (comme de jQuery 1.4):

$('.your_list li').text(function (index) { 
    return index + 1; 
}); 

Answer 2

Je pense que vous préférez réorganiser les éléments de la liste que leur contenu. De cette façon, vous ne perdez aucun des attributs/classes/li ... Et vous pouvez conserver les éléments du DOM intacts, ne changer que l'ordre des enfants de ul.

J'ai trouvé un petit extrait bien faire le faire:

http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

La seule chose que vous avez encore besoin de faire est de rappeler l'ordre initial

function mysortA(a, b) { 
    var compA = $(a).text().toUpperCase(); 
    var compB = $(b).text().toUpperCase(); 
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;  
} 
function mysortB(a, b) { 
    return a.originalindex < b.originalindex ? -1 
     : a.originalindex > b.originalindex ? 1 
     : 0; 
} 

Vous avez initialiser:

var ul = $('ul'); 
var listitems = ul.children('li').get(); 

// remember original index 
listitems.each(function(index, li){ li.originalindex=index; }); 

Ensuite, vous pouvez trier d'une façon:

// sort them using your sort function 
listitems.sort(mysort) 
// rebuild the list container 
listitems.each(function(idx, itm) { mylist.append(itm); }); 

et trier retour:

var ul=$('ul'); 
ul.children('li').get().sort(mysortB).each(function(i,li){ ul.append(li); }); 

Note: non testé - saisir l'idée.