Obtenir un élément du nième nombre d'enfants dans le plus pur JavaScript

J'ai fais une fonction pour mon site où j'ai mis un attribut de données qui contient le nième nombre d'enfants de cet élément.

Mon balisage HTML:

<html>
<body>
    <section class="hardware">some text, nth-child is one</section>
    <section class="hardware">some text, nth-child is two</section>
    <section class="hardware">some text, nth-child is three</section>
    <section class="hardware">some text, nth-child is four</section>
    <section class="hardware">some text, nth-child is five</section>
</body>
</html>

Mon JavaScript:

var selector = document.getElementsByClassName('hardware');
for(var i = 0; i <= selector.length; i++) {
    var index = selector[i] //get the nth-child number here
    selector[i].dataset.number = index;
}

Comment puis-je obtenir le nième nombre d'enfants d'un élément pur JavaScript (pas de jQuery), est-ce encore possible en JavaScript?

c'est de la pure javascript non?
Oui c'est bien, mais comment puis-je obtenir le nième nombre d'enfants?
Si c'est possible avec jQuery, il est également possible sans. Rappelez-vous, jQuery est juste un ensemble de fonctions JS. Il rend les choses plus faciles, il n'ajoute pas de fonctionnalités supplémentaires.

OriginalL'auteur Sake Salverda | 2014-06-26

  1. 3

    Quand vous dites "nombre", entendez-vous 1, 2, etc ou "un", "deux", etc?

    Si 1, 2, etc, alors le nombre est tout simplement i+1...

    Si "un", "deux", etc, alors vous avez besoin pour obtenir le texte à l'intérieur de l'élément, puis probablement utiliser une expression régulière pour l'analyser et d'obtenir la valeur que vous souhaitez.

    avec le nombre je veux dire 1,2,3,4,5, etc...
    Puis i+1 est ce que vous voulez.
    Salverda: Cela ne "fonctionne très bien" quand l'ensemble des éléments retournés par votre getElementsByClassName() est contenue sous le même parent et il n'y a pas d'autres éléments d'enfant qui pourrait interférer avec :nth-child(). Mais si vous pouvez toujours compter sur cette hypothèse, alors i+1 sera en effet suffire.

    OriginalL'auteur jcaron

  2. 5

    Découvrez cette réponse précédente ICI.

    Il utilise 

    var i = 0;
while( (child = child.previousSibling) != null ) 
  i++;
//at the end i will contain the index.

    OriginalL'auteur joshboley

  3. 2

    Je vais répondre aux questions avec les hypothèses suivantes:

    • Votre hardware classé les éléments sont tous des frères et sœurs
    • Vous êtes intéressé par nième enfant pas nième enfant + 1
    • Ils peuvent être mélangés avec d'autres éléments:
    <body>
    <section class="hardware">some text, nth-child is zero</section>
    <section class="software"></section>
    <section class="hardware">some text, nth-child is two</section>
</body>

    (Je suis en train de faire ces hypothèses, parce que c'est le problème que je me pose, pensé qu'il pourrait être utile)

    Donc la principale différence est qu'au lieu d'interroger les éléments qui appartiennent à une classe donnée, je vais me faire l' (direct) les enfants de la body, et de les filtrer.

    Array.from(document.body.children)
  .map((element, index) => ({element, index}))
  .filter(({element}) => element.classList.contains('hardware'))

    Le tableau qui en résulte ressemble à ceci:

    [
  {element: section.hardware, index: 0}
  {element: section.hardware, index: 2}
]

    OriginalL'auteur fodma1

  4. 1

    Simplement l'incrémentation de l'indice linéaire ne fonctionnera que si tous les éléments correspondant à un nom de classe sont le seul élément d'enfants de la même mère, n'ayant pas d'autres éléments qui pourraient interférer avec :nth-child(), comme le montre exactement dans le balisage. Voir cette réponse pour une explication sur la façon dont d'autres éléments peuvent interférer. Également en revue les Les sélecteurs de spec sur :nth-child().

    Un moyen de parvenir à ce qui est plus fiable est de faire une boucle par l'enfant nœuds de chaque élément du nœud parent, incrémentation d'un compteur pour chaque enfant nœud est un nœud d'élément (depuis :nth-child() ne prend en compte que les nœuds d'élément):

    var selector = document.getElementsByClassName('hardware');

for (var i = 0; i < selector.length; i++) {
    var element = selector[i];
    var child = element.parentNode.firstChild;
    var index = 0;

    while (true) {
        if (child.nodeType === Node.ELEMENT_NODE) {
            index++;
        }

        if (child === element || !child.nextSibling) {
            break;
        }

        child = child.nextSibling;
    }

    element.dataset.number = index;
}

    JSFiddle démo

    Noter que cela s'applique l'index correct indépendamment de l'endroit où l'élément est dans les DOM:

    • Si un particulier section.hardware élément est le premier et le seul enfant d'un autre section, il sera affecté le bon indice de 1.

    • Si un .hardware élément est le deuxième enfant de son parent, même s'il est le seul à avoir cette classe (c'est à dire qu'il suit un autre élément sans la classe), il sera affecté le bon indice de 2.

    OriginalL'auteur BoltClock

  5. 0

    Vous pouvez fractionner le texte dans les espaces à obtenir de la dernière mot de chaque split-tableau:

    var hards = document.getElementsByClassName('hardware');
for (var i=0; i < hards.length; i++) {
    var hardText = hards[i].innerText || hard[i].textContent;
    var hardList = hardText.split(' ');
    var hardLast = hardList[hardList.length - 1];
    alert(hardLast);
}

    Je suis à l'aide de || ici, car Firefox ne prend pas en charge innerText, alors que IE ne prend pas en charge textContent.

    Si les éléments contiennent uniquement du texte, puis innerHTML peut être utilisé à la place de innerText/textContent.

    OriginalL'auteur Andy G