JavaScript DOM : Trouver l'index d'un élément dans un conteneur

Question

J'ai besoin de trouver l'index d'un élément dans son conteneur par référence d'objet. Bizarrement, je ne trouve pas de méthode simple. Pas de jQuery s'il vous plaît - seulement DOM.

UL
 LI
 LI
 LI - my index is 2
 LI

Oui, je pourrais attribuer des ID à chaque élément et parcourir en boucle tous les nœuds pour faire correspondre l'ID, mais cela semble une mauvaise solution. N'y a-t-il pas quelque chose de plus agréable ?

Ainsi, disons que j'ai une référence d'objet au troisième LI comme dans l'exemple ci-dessus. Comment puis-je savoir qu'il s'agit de l'indice 2 ?

Merci.

Answer 1

Si vous voulez écrire ceci de manière compacte, tout ce dont vous avez besoin c'est :

var i = 0;
for (;yourElement.parentNode[i]!==yourElement;i++){}
indexOfYourElement = i;

Nous parcourons simplement les éléments du nœud parent, en nous arrêtant lorsque nous trouvons votre élément.

Vous pouvez aussi le faire facilement :

for (;yourElement.parentNode.getElementsByTagName("li")[i]!==yourElement;i++){}

si c'est tout ce que vous voulez regarder.

Answer 2

Un autre exemple utilisant une boucle de base et un contrôle d'index.

HTML

<ul id="foo">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

JavaScript s'exécute au chargement/prêt ou après le rendu de l'ul

var list = document.getElementById("foo"),
    items = list.getElementsByTagName("li");

list.onclick = function(e) {
    var evt = e || window.event,
    src = evt.target || evt.srcElement;
    var myIndex = findIndex(src);
    alert(myIndex);
};

function findIndex( elem ) {
    var i, len = items.length;
    for(i=0; i<len; i++) {
        if (items[i]===elem) {
            return i;
        }
    }
    return -1;
}

Exemple de course

jsFiddle

Answer 3

Il suffit de passer la référence de l'objet à la fonction suivante et vous obtiendrez l'indice

function thisindex(elm) 
{ 
    var the_li = elm; 
    var the_ul = elm.parentNode; 
    var li_list = the_ul.childNodes; 

    var count = 0; // Tracks the index of LI nodes

    // Step through all the child nodes of the UL
    for( var i = 0; i < li_list.length; i++ )
    {
        var node = li_list.item(i);
        if( node )
        {
        // Check to see if the node is a LI
            if( node.nodeName == "LI" )
            {
            // Increment the count of LI nodes
                count++;
            // Check to see if this node is the one passed in
                if( the_li == node )
                {
                    // If so, alert the current count
                    alert(count-1);
                }
            }
        }
    }
}