Ottieni il numero nth-child di un elemento in puro JavaScript

Sto creando una funzione per il mio sito in cui imposto un attributo di dati che contiene il numero nth-child di quell'elemento.Ottieni il numero nth-child di un elemento in puro JavaScript

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

mio JavaScript finora:

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

Come posso ottenere il numero ennesima-figlio di un elemento con puro JavaScript (non jQuery), è presente anche possibile in JavaScript?

fonte

2014-06-26 Sake Salverda

che è puro javascript no? – bitoiu

@bitoiu Sì, lo è, ma come posso ottenere il numero n-figlio? –

Se è possibile con jQuery, è anche possibile senza. Ricorda, jQuery è solo un insieme di funzioni JS. Semplifica le cose, non aggiunge funzionalità extra. – Darkwater

Quando si dice "numero", intendi 1, 2, ecc. O "uno", "due", ecc.?

Se 1, 2, ecc, allora il numero è semplicemente i + 1 ...

Se "uno", "due", ecc, allora avete bisogno di ottenere il testo all'interno dell'elemento, allora probabilmente utilizzare un Regexp per analizzarlo e ottenere il valore desiderato.

fonte

2014-06-26 17:11:52 jcaron

con numero intendo 1,2,3,4,5, ecc ... –

Quindi 'i + 1' è quello che vuoi. – jcaron

@Sake Salverda: Questo "funziona correttamente" solo quando l'intero insieme di elementi restituito da 'getElementsByClassName()' è contenuto nello stesso genitore e non ci sono altri elementi figlio che potrebbero interferire con ': nth-child()' . Ma se puoi sempre fare affidamento su questa ipotesi, allora "i + 1" sarà effettivamente sufficiente. – BoltClock

Verificare questa risposta precedente HERE.

Esso utilizza

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

fonte

2014-06-26 17:14:32 joshboley

è possibile dividere il testo in spazi a avere l'ultima parola da ogni 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); 
}

Sto usando || qui perché Firefox non supporta innerText, mentre IE non supporta textContent.

Se gli elementi contengono solo testo, è possibile utilizzare innerHTML anziché innerText/textContent.

fonte

2014-06-26 17:15:41

semplicemente incrementando l'indice linearmente funziona solo se tutti gli elementi corrispondenti che nome della classe sono i soli elementi figli dello stesso genitore, senza altri elementi che potrebbero interferire con :nth-child(), come mostrato esattamente nel dato markup. Vedere this answer per una spiegazione su come altri elementi potrebbero interferire. Rivedere anche lo Selectors spec su :nth-child().

Un modo per raggiungere questo obiettivo che è più infallibile è quello di un ciclo tra i nodi figlio del nodo padre di ogni elemento, incrementare un contatore per ogni nodo figlio che è un nodo elemento (dal :nth-child() conta solo nodi elemento):

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

noti che questa si applica l'indice corretto indipendentemente da dove l'elemento è data nel DOM:

Se un particolare elemento section.hardware è il primo e l'unico figlio di un diverso section, verrà assegnato l'indice corretto di 1.
Se un elemento .hardware è il secondo figlio del suo genitore, anche se è l'unico con quella classe (cioè segue qualche altro elemento senza classe), verrà assegnato il corretto indice 2

fonte

2014-06-26 17:56:12 BoltClock

Ottieni il numero nth-child di un elemento in puro JavaScript

risposta

Problemi correlati