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

Pour les éléments simples, cela peut être utilisé pour trouver l'index d'un élément parmi ses éléments frères :

function getElIndex(el) {
    for (var i = 0; el = el.previousElementSibling; i++);
    return i;
}

Notez que previousElementSibling n'est pas supporté dans IE<9.

Answer 2

Une approche native moderne pourrait utiliser 'Array.from()' - par exemple : `

const el = document.getElementById('get-this-index')
const index = Array.from(document.querySelectorAll('li')).indexOf(el)
document.querySelector('h2').textContent = `index = ${index}`

<ul>
  <li>zero
  <li>one
  <li id='get-this-index'>two
  <li>three
</ul>
<h2></h2>

`

Answer 3

    const nodes = Array.prototype.slice.call( el.parentNode.childNodes );
    const index = nodes.indexOf(el);
    console.log('index = ', index);

Answer 4

Un exemple de création d'un tableau à partir de HTMLCollection

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

<script>
var tagList = [];

var ulList = document.getElementById("myList");

var tags   = ulList.getElementsByTagName("li");

//Dump elements into Array
while( tagList.length != tags.length){
    tagList.push(tags[tagList.length])
};

tagList.forEach(function(item){
        item.addEventListener("click", function (event){ 
            console.log(tagList.indexOf( event.target || event.srcElement));
        });
}); 
</script>

Answer 5

Vous pouvez itérer à travers les <li> dans le <ul> et arrêtez-vous quand vous trouvez la bonne.

function getIndex(li) {
    var lis = li.parentNode.getElementsByTagName('li');
    for (var i = 0, len = lis.length; i < len; i++) {
        if (li === lis[i]) {
            return i;
        }
    }

}

Démo