Una delle funzioni di traversing più utili di jQuery è sicuramente .eq() . Ci permette di accedere ad un elemento di una selezione in base alla sua posizione, cioè al suo indice (index). Se quindi avessimo una serie di elementi HTML del genere
1 2 3 4 | <div class="italiana">Lamborghini</div> <div>Bugatti</div> <div class="italiana">Ferrari</div> <div>McLaren</div> |
potremmo accedere ad uno di essi in base al suo index:
1 | $('div.italiana').eq(1).css('color', 'red'); |
È importante ricordarsi che l’index parte da zero, in questo caso quindi, il nome che diventerà rosso è Ferrari.
Facciamolo senza jQuery
Per ottenere lo stesso risultato non c’è necessariamente bisogno di jQuery, possiamo sfruttare funzioni già incluse in Javascript (vanilla, cioè “liscio”) con una sintassi molto semplice:
1 | document.querySelectorAll('div.italiana')[1].style.color = 'red'; |
In questo caso, dobbiamo tenere presente che document.querySelectorAll restituisce un array, quindi dovremo accedere ai suoi elementi con l’index, lo stesso utilizzato con jQuery nell’esempio ( 1 nel nostro caso)
Commenta per primo