Indice d'affichage de l'élément de liste à l'aide jQuery

Question

J'ai une liste non ordonnée comme ceci:

<ul class="foo"> 
    <li id="asdf"> 
    <span class="indexnumber"></span> 
    <span class="description">whatever</span> 
    </li> 

    <li id="asdfasdf"> 
    <span class="indexnumber"></span> 
    <span class="description">whatever</span> 
    </li> 
</ul> 

Je veux afficher le numéro d'index de l'élément de liste dans la durée de indexnumber (soit le premier élément affiche 1, la seconde affichera 2, et ainsi de suite). Mes utilisateurs auront la possibilité de trier les éléments de la liste (en utilisant jquery ui sortable). Je voudrais être en mesure de montrer à mes utilisateurs un numéro dans l'élément de la liste qui indique où se trouve l'élément de la liste (et la valeur peut changer lorsque l'utilisateur réorganise la liste).

Comment puis-je simplement afficher la position d'index dans la matrice à l'aide de jquery? Alternativement, existe-t-il un moyen facile de faire cela avec les événements triables (c'est-à-dire, une fois la liste triée, incrémenter ou décrémenter les numéros d'index dans tous les autres éléments de la liste selon le cas)?

Answer 1

je fini par faire ce qui suit:

$(function() { 
    $(".foo").sortable({ 
     stop: function(event, ui) { 
      var itemID = $(ui.item).attr("id"); 
      var items = $("li#" + itemID).parent(".foo").children(); 

      var updateditems = new Array(); 

      for (var i = 0; i <= items.length - 1; i++) { 
       var singleitemID = $(items[i]).attr("id"); 
       var loc = i + 1; 

       $("#" + singleitemID).text(loc); 


       updateditems.push([singleitemID, loc]); 
      } 
     } 
    }); 
}); 

Answer 2

Je suppose que vous pouvez ajouter les éléments DOM à un tableau en utilisant quelque chose comme

var arr = jQuery.makeArray(document.getElementsByTagName("span")); 

Ensuite, obtenir leur index à l'aide jQuery.inArray(value, array) qui retourne un int.

pas très jolie mais

Answer 3

index_list = function() { 
    $(".foo li").each(function(i){ 
     $(this).find(".indexNumber").html((i+1)); 
    }); 
} 

vous pouvez appeler cette fonction sur le document prêt et sur l'attribut de changement de l'objet sortable