JavaScript DOM: Trouver de l'Index de l'Élément Dans un Conteneur
J'ai besoin de trouver un indice de l'élément à l'intérieur de son conteneur de l'objet de référence. Étrangement, je ne peux pas trouver un moyen facile. Pas de jQuery veuillez seule DOM.
UL
LI
LI
LI - my index is 2
LI
Oui, je pourrais attribuer des Identifiants à chaque élément et en boucle par tous les nœuds pour correspondre à l'ID, mais il semble une mauvaise solution. N'est-ce pas là quelque chose de plus sympa?
Donc, dire que j'ai une référence d'objet à la troisième LI comme dans l'exemple ci-dessus. Comment puis-je sais que c'est l'index 2?
Grâce.
- Comment avez-vous besoin pour obtenir l'indice? passez la souris.. etc ??
- pourquoi ne pas faire un previousSibling sur la li de référence jusqu'à ce que vous frappez null?
- double possible de Trouver des DOM nœud d'index
- Je pense que ce serait facile si vous ajoutez l'attribut personnalisé à l'élément li. Par exemple, <li index="0">, <li index="1">, et vous pouvez y accéder facilement.
Vous devez vous connecter pour publier un commentaire.
Vous pourriez faire usage de
Array.prototype.indexOf
. Pour cela, nous avons besoin d'un peu de "fonte" laHTMLNodeCollection
en un véritableArray
. Par exemple:Alors nous pourrions l'appeler:
Exemple:
JS:
HTML:
.childNodes
et.children
sont des choses différentes..children
est un sous-ensemble, une liste de tous lesElementNodes
seulement.previousElementSibling
solution c'est mieux, car il exclut les nœuds de texte et renvoie l'index de l'élément que vous attendez.const index = [...el.parentNode.children].indexOf(el)
Array.from( el.parentNode.children ).indexOf( el );
sur cette instance, juste pour des raisons de lisibilité.2017 mise à jour
L'original de la réponse ci-dessous suppose que l'OP veut inclure les non-vide nœud de texte et d'autres types de nœuds ainsi que des éléments. Il ne semble pas clair pour moi maintenant à partir de la question de savoir si c'est une hypothèse valable.
En supposant au contraire, vous voulez juste l'index de l'élément,
previousElementSibling
est maintenant bien pris en charge (ce qui n'était pas le cas en 2012) et est le choix évident maintenant. Le suivant (qui est le même que certaines autres réponses ici) va travailler dans tout les grands sauf IE <= 8.Réponse originale à cette question
Suffit d'utiliser
previousSibling
jusqu'à ce que vous frappeznull
. Je suis en supposant que vous voulez ignorer les espaces blancs uniquement les nœuds de texte; si vous souhaitez filtrer des autres nœuds, puis ajuster en conséquence.var nodeType = node.nodeType; ... if (node.nodeType == nodeType && (node.nodeType != 3...
previousElementSibling
plutôt la méthode de test avec les regexp?Voici comment je le fais (2018 version ?) :
Tadaaaam. Et, si jamais vous voulez traiter les raw des nœuds de texte trop, vous pouvez faire ceci à la place :
J'ai étalé les enfants dans un tableau comme ils sont un HTMLCollection (ainsi, ils ne fonctionnent pas avec indexOf).
Faire attention à ce que vous êtes à l'aide de Babel ou le navigateur de la couverture est suffisante pour ce que vous avez besoin pour atteindre (réflexions sur la propagation de l'opérateur qui est en fait un Tableau.de derrière la scène).
Ou de l'utilisation
let
déclaration.Pour seulement des éléments peut être utilisé pour trouver l'indice d'un élément parmi c'est les éléments frères:
Noter que
previousElementSibling
n'est pas pris en charge dans IE<9.Vous pouvez l'utiliser pour trouver l'indice d'un élément:
Array.prototype.indexOf.call(yourUl, yourLi)
Ceci par exemple les journaux de tous les indices:
JSFIDDLE
previousElementSibling
solution c'est mieux, car il exclut les nœuds de texte et renvoie l'index de l'élément que vous attendez.Un exemple de faire un tableau à partir d'HTMLCollection
Moderne natif approche pourrait utiliser le Tableau.à partir de()' - par exemple:"
JS:
HTML:
`
Si vous voulez écrire de cette façon compacte pour tous vous avez besoin est:
Nous venons de parcourir les éléments dans le nœud parent, s'arrêtant quand nous trouvons votre élément.
Vous pouvez aussi facilement faire:
si c'est tout ce que vous voulez les regarder.
Vous pouvez parcourir le
<li>
s dans le<ul>
et arrêtez-vous quand vous trouver la bonne.Démo
Un autre exemple qui vient à l'aide d'une base de boucle et de l'indice de vérifier
HTML
JavaScript s'exécute onload/prêt ou après l'ul est rendu
Exemple
jsFiddle
Il suffit de passer la référence de l'objet à la fonction suivante et vous obtiendrez l'indice