17
Sep
Associare dati ad elementi DOM con jquery
$('div').data(chiave,valore);
Utilizzo:
var foo = 'ciao!';
//Salvare una variabile in un div alla voce saluto
$('div').data('saluto',foo);
//Prelevare l'elemento archiviato come "saluto"
$('div').data('saluto'); //Restituirà "ciao"
Il metodo .data() permette di salvare dati arbitrari (array, variabili etc...) dentro un qualsiasi elemento DOM nella nostra pagina html.
E' possibile associare ad ogni elemento DOM più valori contemporaneamente, identificandoli con una chiave, al fine di poterli utilizzare in momenti successivi.
Questo metodo è dichiarato sicuro da riferimenti circolari e quindi da memory leaks.
Se il metodo data viene chiamato con un selettore jquery che referenzia più elementi DOM, il dato verrà collegato a tutti gli oggetti DOM referenziati.
Nel caso in cui venisse passato un oggetto javascript, esso NON verrà copiato ma sarà condiviso da tutti gli elementi DOM.
Esempio:
Valore associato al div:
Sorgente dell'esempio:
<!DOCTYPE html>
<html>
<head>
<style>
div { background-color:yellow; width:200px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div> </div>
<button id="b1">Salva il valore "bubu"</button>
<button id="b2">Salva il valore "settete"</button><br><br>
<button id="b3">Leggi il valore dal div!</button>
<button id="b4">Cancella il valore dal div!</button><br><br>
Valore associato al div: <span></span>
<script language="javascript">
$('#b1').click(function(){
$('div').data('test','bubu');
});
$('#b2').click(function(){
$('div').data('test','settete');
});
$('#b3').click(function(){
if( $('div').data('test') ){
$('span:last').text( $('div').data('test') );
}else{
$('span:last').text('undefined');
}
});
$('#b4').click(function(){
$('div').removeData('test');
$('span:last').text('Rimosso!');
});
</script>
</body>
</html>
Riferimenti: http://docs.jquery.com/Main_Page