Recuperare id da un elemento cliccato con jQuery

Molto spesso capita di avere l’esigenza di recuperare l’id di un div o elemento cliccato da usare in jQuery per animazioni, callback e molto altro. Vediamo come fare in qusto semplice ma (sono sicuro) utilissimo articolo.

VISUALIZZA LA DEMO >>

 Veniamo subito al dunque, abbiamo una struttura html di questo tipo:

<a class="testo" id="1">Blabla 1</a>
<a class="testo" id="2">Blabla 2</a>

Vogliamo sapere che id è stato cliccato. Ovviamente al posto dei link come in questo caso potete inserire div, elementi, immagini e tutto ciò che vi serve.

Ecco come procedere (codice commentato):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$(document).ready(function() {

                //quando clicco sul testo (trigger)
		$('.testo').click(function(){

                        //imposto una variabile e ci associo l'attributo id del trigger
                       //che ho cliccato (in questo caso .testo)

			var recupero_id = $(this).attr("id");	

		        //da qui in poi potete usare l'id recuperato per fare qualcosa
                        //in questo caso faccio apparire un alert con dentro l'id recuperato.

			alert(recupero_id);

		}); //fine click function

	}); //fine DOM

</script>

Vi invito alla lettura dei commenti al codice per capire meglio il funzionamento “passo-passo”, in ogni caso il procedimento è abbastanza semplice, uso la funzione .attr() per recuperare l’attributo id dell’elemento cliccato, mettendo il risultato in una variabile possiamo usare questo valore in ogni momento senza problemi. Come già detto, oltre ai link,  come trigger potete usare anche altri elementi come div o immagini, il procedimento non cambia!

In questo esempio, molto banale ma esplicativo, una volta recuperato l’id faccio apparire un alert con all’interno l’id recuperato, ma ovviamente possiamo pensare di usare questo valore in termini “più ampi” come ad esempio ciclare animazioni, e molto altro!

VISUALIZZA LA DEMO >>

SCARICA IL SORGENTE >>

Spero vi sia utile, a domani!

Lascia la tua opinione

2 comments

×