Holen eines Elements das N-te Kind Anzahl in reinem JavaScript

Ich versuche eine Funktion für meine Website, wo ich ein data-Attribut enthält die x-te-und-Kind-Nummer des Elements.

Meine HTML-markup:

<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>

Mein JavaScript so weit:

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;
}

Wie bekomme ich die N-te Kind Nummer des Elementes mit reinem JavaScript (jQuery nicht), ist dies sogar möglich, in JavaScript?

dass ist eine Reine javascript-Nein?
Ja ist es, aber wie bekomme ich die N-te Kind Nummer?
Wenn es möglich ist mit jQuery, ist es möglich, auch ohne. Denken Sie daran, jQuery ist nur eine Reihe von JS-Funktionen. Es macht die Dinge einfacher, es doesn ' T fügen Sie zusätzliche Funktionalität.

InformationsquelleAutor Sake Salverda | 2014-06-26

3

Wenn Sie sagen, "Anzahl", meinst du 1, 2, usw. oder "eins", "zwei", etc?

Wenn 1, 2, usw, dann ist die Zahl einfach i+1...

Wenn "eins", "zwei", usw., dann brauchen Sie, um den text in dem element gibt, dann wahrscheinlich ein Regexp zu analysieren und erhalten den Wert, den Sie wollen.

mit Anzahl meine ich, 1,2,3,4,5, etc...
Dann i+1 ist, was Sie wollen.
Salverda: Diese nur "funktioniert", wenn die gesamte Menge der Elemente zurückgegeben, die von Ihrem getElementsByClassName() enthalten ist, unter den gleichen Eltern und es gibt keine anderen Kind-Elemente, die stören könnten :nth-child(). Aber wenn Sie immer darauf verlassen, dass diese Annahme, dann i+1 wird in der Tat ausreichen.

InformationsquelleAutor jcaron

Check out diese Vorherige Antwort HIER.

Es nutzt

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

InformationsquelleAutor joshboley

2

Werde ich die Fragen beantworten, die mit den folgenden Annahmen:
- Ihre hardware klassifiziert Elemente sind alle Geschwister
- Sie interessiert sind N-te Kind nicht nth-child + 1
- Sie können gemischt werden mit anderen Elementen:
```
<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>
```
(Ich mache diese Annahmen, denn das ist das problem ich bin vor, dachte, es könnte nützlich sein)

Also der Hauptunterschied ist, dass statt der Abfrage der Elemente, gehören zu einer bestimmten Klasse, ich werde der (direkten) Kinder der body, und filtern Sie.
```
Array.from(document.body.children)
  .map((element, index) => ({element, index}))
  .filter(({element}) => element.classList.contains('hardware'))
```
Das resultierende array wird wie folgt Aussehen:
```
[
  {element: section.hardware, index: 0}
  {element: section.hardware, index: 2}
]
```
InformationsquelleAutor fodma1
1

Einfach Inkrementieren der index-Linear wird nur funktionieren, wenn alle die passenden Elemente, die der Klasse name nur-element-Kinder von den gleichen Eltern, die keine andere Elemente, die stören könnten :nth-child(), wie gezeigt, genau in der gegebenen markup. Sehen diese Antwort für eine Erklärung der Funktionsweise anderer Elemente beeinträchtigen können. Überprüfen Sie auch die Selektoren spec auf :nth-child().

Ein Weg dies zu erreichen, ist mehr kinderleicht ist, um eine Schleife durch die untergeordneten Knoten von jedem element der übergeordnete Knoten inkrementiert einen Zähler für jedes Kind Knoten ist ein element-Knoten (da :nth-child() zählt nur element-Knoten):
```
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 demo

Beachten Sie, dass dies die richtige index unabhängig davon, wo das element ist im DOM:
- Wenn eine bestimmte section.hardware element ist das erste und einzige Kind von einem anderen section es werden zugewiesen der korrekte index des 1.
- Wenn ein .hardware element ist das zweite Kind seiner Eltern, auch wenn es die einzige ist, mit dieser Klasse (D. H. es folgt ein anderes element ohne der Klasse), es werden zugewiesen der richtige index von 2.
InformationsquelleAutor BoltClock
0

Teilen Sie den text in die Räume an der letzten Wort von jeder split-array:
```
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);
}
```
Ich bin mit || hier, weil Firefox nicht unterstützt innerText, während der IE nicht unterstützt textContent.

Wenn die Elemente, die nur text enthalten, dann innerHTML kann anstelle von verwendet werden innerText/textContent.

InformationsquelleAutor Andy G

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.