Ottieni l’indice dell’elemento cliccato usando puro javascript

Ho bisogno di conoscere l’indice dell’elemento cliccato. Non riesco a capire come farlo

for (i = 0; i < document.getElementById('my_div').children.length; i++) { document.getElementById('my_div').children[i].onclick = function(){'ALERT POSITION OF CLICKED CHILD'}; } 

this.index?

ecco un esempio di ciò che sto cercando di fare (restituisce solo 6):

     Untitled Document  body{margin:0;} #container div{height:50px;line-height:50px; text-align:center}    
1
2
3
4
5
6
for (i = 0; i < document.getElementById('container').children.length; i++) { document.getElementById('container').children[i].onclick = function(){alert('Number ' + i + ' was clicked')}; }

Ecco una parte di codice che può aiutarti a ottenere l’indice dell’elemento cliccato all’interno del ciclo for . Tutto ciò di cui hai bisogno è un nuovo ambito :

 var g = document.getElementById('my_div'); for (var i = 0, len = g.children.length; i < len; i++) { (function(index){ g.children[i].onclick = function(){ alert(index) ; } })(i); } 

Modifica 1: incorporando i commenti dell'utente Felix Kling nella risposta.

il gestore di eventi è già una chiusura

Modifica 2: collegamento di violino aggiornato

Con la destrutturazione ES6 puoi farlo

 const index = [...el.parentElement.children].indexOf(el) 

o

 const index = Array.from(el.parentElement.children).indexOf(el) 

o versione ES5

 var index = Array.prototype.slice.call(el.parentElement.children).indexOf(el) 

Gli elementi della cella di tabella hanno una proprietà cellIndex , ma non conosco altri elementi. O dovresti farlo

  • creare una chiusura per riservare il valore di i
  • contare dynamicmente il previousSibling Sibling s
  • aggiungi una proprietà index nel tuo ciclo for e leggi che (non aggiungere oggetti host).

L’approccio di chiusura sarà il più semplice, penso. Assicurati di aver capito come funzionano le chiusure, ci sono buone spiegazioni sul web.

 function makeAlertNumber(element, i) { element.addEventListener('click', function() { alert('Number ' + i + ' was clicked'); }, false); } [].slice.call(document.getElementById('container').children).forEach(makeAlertNumber); // homework: find a way to express this for older browsers :-) 

La risposta accettata (da Ashwin Krishnamurthy) è in realtà tutt’altro che ottimale.

Puoi solo fare:

 const g = document.getElementById('my_div'); for (let i = 0, len = g.children.length; i < len; i++) { g.children[i].onclick = function(){ alert(index) ; } } 

per evitare di creare chiusure inutili. E anche in questo caso non è ottimale dal momento che stai creando 6 gestori di eventi DOM (6 divs nell'esempio sopra) solo per ottenere un numero di un singolo div .

Quello che dovresti fare è usare una delega di eventi (albind un evento click singolo al genitore) e quindi controllare l'indice di e.target usando il metodo che ho menzionato prima e sopra ( Ottieni indice dell'elemento cliccato usando puro javascript ).

L’indice in relazione a cosa?

Se riguarda l’indice all’interno della raccolta HTML corrente, l’indice verrebbe semplicemente rappresentato con la tua variabile contatore i .

Una parola di caucanvas: poiché le HTMLCollections sono “Live”, dovresti sempre usarle per calcolare il .length all’interno di un ciclo. Se accade che tali elementi vengano aggiunti o rimossi all’interno del loop, possono accadere cose strane e pericolose. Memorizza il valore .length prima di chiamare il ciclo.

getIndexOfNode: function(node){ var i = 1; while(node.previousElementSibling != null){ i++ } return i; }
la funzione restituirà l’indice del nodo passato nel suo elemento genitore.