jQuery mette a nostra disposizione uno strumento molto utile per poter eseguire una funzione più volte: la funzione each().

Un esempio di questa utilità è dato dal poter effettuare controlli diversi su ogni elemento dichiarato ed eseguire azioni diverse caso per caso.

Vediamo quindi un esempio di applicazione semplice che ci permette di capirne il funzionamento e, quindi, le molteplici possibilità di utilizzo.

tasto per vedere una demo

Un’esempio di utilizzo della funzione each

Nell’esempio che analizziamo, utilizzeremo la funzione each per calcorare ogni volta la larghezza delle immagini inserite e ridimensioneremo quindi il box che contiene esse, e la descrizione associata, a seconda della misura ottenuta. Questo ci permette di non dover creare classi specifiche di CSS a seconda della dimensione di immagine che stiamo utilizzando.

Il codice HTML, creiamo un box per immagini e descrizioni

<div id="container">
		<div class="photo-box fleft">
			<img src="castello-malaspina.jpg" width="320" height="200" alt="castello dei malaspina" />
			<div class="description">Foto del castello dei Malaspina. Donec a lacus tortor. Nulla quis lacus orci, in interdum felis.</div>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat arcu metus. Cras cursus consequat varius. Donec dapibus ante eget orci molestie eget tincidunt est placerat. Sed eu porta eros. Fusce viverra lacinia adipiscing. Nam condimentum felis nec sapien adipiscing blandit id eu massa. Donec a lacus tortor. Nulla quis lacus orci, in interdum felis.</p>
		<div class="photo-box fright">
			<img src="torre-di-pisa.jpg" width="200" height="320" alt="torre di pisa" />
			<div class="description">La torre di Pisa condimentum felis nec sapien adipiscing blandit id eu massa</div>
		</div>
		<p>Curabitur mattis, ante eget imperdiet sollicitudin, sem sem facilisis metus, ac posuere ligula massa ac nisi. Cras enim nisl, blandit ut malesuada ut, egestas ac magna. Suspendisse augue ligula, tincidunt eget consectetur in, accumsan sed dolor. Maecenas condimentum imperdiet mauris quis faucibus. Suspendisse auctor auctor dignissim. Morbi porta viverra dictum. Aliquam accumsan sagittis ante auctor mattis. Vivamus aliquet dignissim sapien posuere egestas. Donec ullamcorper, nibh eu consequat feugiat, diam ipsum auctor nunc, vitae porta eros sem vitae nunc.</p>
		<div class="photo-box fleft">
			<img src="cielo-soffiato.jpg" width="320" height="200" alt="cielo soffiato" />
			<div class="description">Nuvole di cielo soffiato velit, auctor ut iaculis vitae, adipiscing ac sem</div>
		</div>
		<p>Aenean consequat rhoncus felis et dignissim. Praesent eu lorem quis diam egestas volutpat. Duis pharetra sagittis augue et adipiscing. Praesent a ligula est. Sed viverra aliquet purus, quis tristique felis dignissim at. Etiam turpis velit, auctor ut iaculis vitae, adipiscing ac sem. Vestibulum dolor sem, bibendum eu laoreet nec, aliquam et nibh. Integer non gravida orci. Etiam dolor justo, facilisis non dapibus vel, interdum vitae diam. Sed quis eros felis. </p>
	</div>

Come possiamo vedere ogni foto avrà la sua descrizione specifica e tutto sarà contenuto dentro al div photo-box. Sarà poi la classe float a permettere di distinguere i vari casi…

Prepariamo il foglio stile

Ciò che realmente ci interessa del CSS è di dichiarare semplicemente le proprietà float:left e float:right per decidere se vogliamo che il nostro box di immagini sia situato a destra o a sinistra del testo.

#container {
	width:800px;
	margin:0 auto;
	font-size:14px;
	color:#333;
	font-family:Verdana, Geneva, sans-serif;
	line-height:18px;
	}
.description {
	color:#076598;
	font-size:12px;
	font-style:italic;
	}
.fleft {
	float:left;
	}
.fright {
	float:right;
	}

Finalmente jQuery each

Finito l’allestimento passiamo ad analizzare lo script vero e proprio che utilizziamo. Lo script completo utilizzato per l’esempio è il seguente:

$(document).ready(function(){
	photowidth();
});
function photowidth() {
    $(".photo-box").each(function(){
        lPhoto = $("img", this).width()
        $(".description", this).css("width",lPhoto);
        cLeft = $(this).hasClass("fleft");
        cRight = $(this).hasClass("fright");
        if (cLeft){
            $(this).css("margin","0px 14px 5px 0");
            };
        if (cRight){
            $(this).css("margin","0px 0px 5px 14px");
            };
    });
}

Analizziamolo passo passo:
Per prima cosa lanciamo la funzione photowidth al caricamento della nostra pagina:

$(document).ready(function(){
	photowidth();
});

La parte fondamentale dello script è quella che segue:

$(".photo-box").each(function(){
        lPhoto = $("img", this).width()
        $(".description", this).css("width",lPhoto);

Qui infatti stiamo dicendo: per ogni elemento con classe photo-box calcola la larghezza ed assegna questo valore alla variabile lPhoto. Assegna quindi questo valore all’elemento con classe description ($(".description", this)) discendente da photo-box. In questo modo ridimensioniamo il box alla larghezza esatta dell’immagine ed il tutto rimane impaginato correttamente!

Il resto dello script non fa altro che cambiare le dimensioni dei margini del box a seconda che sia settata la classe fleft o fright.

 cLeft = $(this).hasClass("fleft");
        cRight = $(this).hasClass("fright");
        if (cLeft){
            $(this).css("margin","0px 14px 5px 0");
            };
        if (cRight){
            $(this).css("margin","0px 0px 5px 14px");
            };

Et voilà il gioco è fatto! Ricapitolando quindi abbiamo visto come effettuare controlli specifici con la funzione each() ad ogni “scansione” del DOM, in modo da poter eseguire più volte operazioni ed azioni diverse su elementi con la stessa classe.