web-dev-qa-db-fra.com

Trouver l'index de noeud DOM

Je veux trouver l'index d'un nœud DOM donné. C'est comme l'inverse de faire

document.getElementById('id_of_element').childNodes[K]

Je veux plutôt extraire la valeur de K étant donné que j'ai déjà la référence au nœud enfant et au nœud parent. Comment puis-je faire cela?

javascriptdom
59
timothy

La manière la plus courte possible, sans framework, dans toutes les versions de Safari, FireFox, Chrome et IE> = 9:

var i = Array.prototype.indexOf.call(e.childNodes, someChildEl);

104
Matthew Caruana Galizia

Un peu plus court, attend que l'élément soit en elem, renvoie k.

for (var k=0,e=elem; e = e.previousSibling; ++k);

Après un commentaire de Justin Dearing J'ai revu ma réponse et ajouté ce qui suit:

Ou si vous préférez "pendant":

var k=0, e=elem;
while (e = e.previousSibling) { ++k;}

La question initiale était de savoir comment trouver l'index d'un élément DOM existant. Mes deux exemples ci-dessus dans cette réponse s'attendent à ce que elem soit un élément DOM et que l'élément existe toujours dans le DOM. Ils échoueront si vous leur donnez un objet nul ou un objet qui n'a pas previousSibling . Une manière plus infaillible serait quelque chose comme ceci:

var k=-1, e=elem;
while (e) {
    if ( "previousSibling" in e ) {
        e = e.previousSibling;
        k = k + 1;
    } else {
        k= -1;
        break;
    }
}

Si e est nul ou si previousSibling est manquant dans l'un des objets, k est -1.

23
some

La réponse de RoBorg fonctionne ... ou vous pouvez essayer ...

var k = 0;
while(elem.previousSibling){
    k++;
    elem = elem.previousSibling;
}
alert('I am at index: ' + k);
4
scunliffe

Une approche native moderne pourrait inclure Array.from(e.children).indexOf(theChild)

Non IE, mais Edge fonctionne: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from =

2
calipoop

Comme pour l'affiche originale, j'essayais de

trouver l'index d'un noeud DOM donné

mais celui sur lequel je venais d'utiliser un gestionnaire de clics, et niquement par rapport à ses frères et sœurs. Je ne pouvais pas finir par faire fonctionner ce qui précède (à cause de noobness sans aucun doute, j'ai essayé de remplacer "this" pour elem mais cela n'a pas fonctionné).

Ma solution a été d'utiliser jquery et d'utiliser:

var index = $(this).parent().children().index(this);

Cela fonctionne sans avoir à spécifier le type de l'élément c'est-à-dire: 'h1' ou un id etc.

2
Andrew Plummer

en utilisant un framework comme un prototype, vous pouvez utiliser ceci:

$(el).up().childElements().indexOf($(el))
0
lezardo

Je pense que la seule façon de le faire est de parcourir les enfants des parents jusqu'à ce que vous vous trouviez.

var K = -1;
for (var i = myNode.parent.childNodes.length; i >= 0; i--)
{
    if (myNode.parent.childNodes[i] === myNode)
    {
        K = i;
        break;
    }
}

if (K == -1)
    alert('Not found?!');
0
Greg