devdev / in the loop

Alternativa a jQuery .eq() in Javascript

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

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

$('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:

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)

 

Questo articolo ti è stato utile?
Javascript – LETTURA 4 MINUTI Come conoscere la posizione di un elemento con jQuery index o in vanilla Javascript
Il motto di jQuery è “Write less, do more”, anche se gli ultimi anni stiamo vedendo uno shifting di molte…
Javascript – LETTURA 6 MINUTI Utilizzare i parametri GET in Javascript con URLSearchParams
I parametri URL, che tutti conosciamo come parametri GET o query) vengono utilizzati per passare informazioni alla pagina che stiamo…
Javascript – LETTURA 4 MINUTI Aggiungere una regola CSS con Javascript
Aggiungere una regola CSS in modo dinamico con Javascript può esserci utile in vari casi: uno riguarda sicuramente le performance,…
Javascript – LETTURA 3 MINUTI Simulare click in vanilla JavaScript con MouseEvent
Come possiamo scrivere l’equivalente del metodo .click() di jQuery, simulando di fatto un click? Cercando in rete si scopre facilmente che…
Roba figa da
if (weekend) {
    relax();
}
la nostra newsletter, ogni tanto.