Pillole di jQuery – loop e dintorni

Usare i loop per manipolare gli elementi di una pagina

Con 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

var listaUrl=[];
$("div #cont a[href]").each(function(i){
listaUrl[i]=$(this).attr('href');
});

Utilizzare il metodo .eq() per individuare specifici elementi di un set

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

$("ul#cont >li").eq(1).css("color", "#990000");

Ottenere una lista “rovesciata”

Questo sistema consente di invertire gli elementi di una lista:

codice html:

< ul id="lista" >
 < 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 >");

Tracciare l’indice di un elemento cliccato in un set con relativo valore

In questo esempio si utilizza il metodo .index()

codice html:

< ul id="lista" >
 < 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….

Estrarre dati da un set

In questo esempio creiamo un array estraendo i dati da una lista a condizione che il suo indice sia minore di 2

codice html:

< ul id="lista" >
< 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!