Usare i loop per manipolare gli elementi di una pagina
C
on l’immancabile manuale “JQUERY COOKBOOK” della O’REILLY, sempre presente sulle nostre postazioni di lavoro, ecco alcuni esempi e spunti di utilizzo dei loop con jquery.
Il metodo each()
Il metodo each() consente di eseguire cicli per svariati possibili utilizzi, come ad esempio popolare array di dati prelevando il contenuto di alcuni tag o attributi, oppure costruire codice run-time e assegnare metodi a gestori di eventi come dei link.
Per esempio, supponendo di avere un div con id=”cont” che contenga una serie di link:
Popolare un array prelevando dati da un attributo in un set$(“div #cont a[href]”).each(function(i){
listaUrl[i]=$(this).attr(‘href’);
});
Il metodo .eq() è utile per rintracciare uno specifico elemento in un set, nel caso in cui se ne conosca la posizione.
L’argomento che gli viene passato è l’indice di un set di elementi (a base zero come gli array)
Esempio (rintraccio il secondo elemento della lista con id cont e gli cambio di colore):
Questo sistema consente di invertire gli elementi di una lista:
codice html:
< li >aaa< / li >
< li >bbb< / li >
< li >ccc< /li >
< li >ddd< /li >
< / ul >
////js
var invertita=$(“ul#lista li”).get().reverse();
$(“ul#lista”).empty();
$.each(invertita, function(i){
$(“ul#lista”).append(“< li >”+ invertita[i].innerHTML+”< / li >”);
In questo esempio si utilizza il metodo .index()
codice html:
< li >aaa< / li >
< li >bbb< / li >
< li >ccc< /li >
< li >ddd< /li >
< / ul >
////js
$(“#lista li”).click(function(){
//alert(“click: “+$(“#lista li”).index(this));
alert($(“#lista li”).index(this)+” : “+$(this).html());
})
Ad ogni click sui singoli elementi della lista ottengo indice e contenuto.
Questa tecnica potrebe tornare utile per esempio se vogliamo associare delle azioni a seconda della posizone dell’elemento o del suo contenuto….
In questo esempio creiamo un array estraendo i dati da una lista a condizione che il suo indice sia minore di 2
codice html:
< li >aaa< / li >
< li >bbb< / li >
< li >ccc< /li >
< li >ddd< /li >
< / ul >
////js
var newLista=[];
$(“#lista li”).each(function(i){
if($(“#lista li”).index(this)<2){
//alert($(this).html())
newLista.push($(this).html());
alert(newLista);
}
See you soon!
Leave a Comment