Come selezionare elementi multipli con JQuery

Chi ha avuto modo di utilizzare JQuery nel tempo, ha sicuramente apprezzato la possibilità di gestire, selezionare, modificare elementi di una pagina web in modo veloce e facile, in maniera più semplificata rispetto al puro JavaScript.

Rispetto a quest’ultimo infatti, con JQuery un programmatore può sviluppare un codice più snello e con meno vincoli, come ad esempio la selezione delle comuni “classi” presenti in una pagina web, che come ben si sa risulta essere più complesso che con JavaScript.

In diverse occasioni ho avuto modo di conoscere ulteriori caratteristiche di JQuery che mi hanno aiutato a migliorare e ottimizzare gli script, un po’ meno conosciuti ma dalla grande utilità.

Uno di questi è sicuramente la possibilità di selezionare più elementi contemporaneamente, su cui agire e apportare modifiche, Per chi ne avesse bisogno, qui cercherò di spiegare in maniera semplice e dettagliata come usare la selezione multipla di JQuery.

Selezione multipla di JQuery

Chi segue questa guida, probabilmente già avrà avuto modo di usare JQuery nei propri progetti. La selezione multipla non è poi molto differente dal normale, poiché la sintassi da utilizzare è la medesima; cambia esclusivamente la sintassi da utilizzare.

Ad esempio $('#myId').show(); è usato per selezionare selettori “id”, oppure $('.myClass').show(); per le classi all’interno di una pagina web; per la selezione multipla di JQuery basterà unire i due selettori all’interno delle parentesi tonde, purché vengano separati da una virgola ed entrambi restino all’interno degli apici/virgolette di apertura e chiusura.

$('#myId, .myClass, button').show();

I selettori possono essere di differente tipologia, e subiranno gli stessi effetti. Bada bene a rispettare la sintassi giusta o può causare problemi durante l’esecuzione del codice. Non ci sono limiti per la selezione di elementi.

Un altro esempio:

$('#button1, #button2').on('click', function(e) {
  ...
});

$("div, table, ul").css(...);

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA