Dec 302012
 

Una delle basi necessarie per lavorare agevolmente con jQuery è padroneggiare gli array. In questo esempio vedremo come aggiungere alla pagina gli elementi dell’array scorrendolo tramite un ciclo each.

Partiamo dall’html:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>La funzione each()</title>
 </head>
 <body>
 <h2>Questo esempio mostra come usare la funzione each() per appendere una lettera prima di ogni paragrafi</h2>
 <p>Primo</p>
 <p>Secondo</p>
 <p>Terzo</p>
 </body>
 </html>
 

Lo script verrà  aggiunto alla fine dell’html prima della chiusura del tag body: questo darà  come vantaggio un più veloce rendering dell’html senza attendere il download delle risorse altrimenti poste nel tag head.

 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
 $(document).ready(function() {
 var values = ['a', 'b', 'c', 'd'];
 });
 </script>
 

Posizionarci alla fine dell’html non ci dispensa dall’utilizzare il $(document).ready
L’ideale sarebbe mettere tutto questo codice in un file esterno.
Dichiarato l’array, possiamo procedere con il primo ciclo:

 $.each(values, function(index, value) {
 values[index] = value.toUpperCase();
 });
 

Con questo ciclo trasformamo in lettere maiuscole gli elementi del nostro array,
l’esempio evidenzia sia l’indice del ciclo, sia l’elemento (value) in esame nello step.

Il secondo ciclo aggiunge un trattino prima di ogni paragrafo, infatto si tratta di un ciclo sui ‘p’:

 $('p').each(function(index, el) {
 $(el).prepend(' - ');
 });
 

Infine il terzo ciclo, sempre sui paragrafi, aggiunge l’elemento preso dall’array:

 $('p').each(function(index) {
 $(this).prepend(values[index]);
 });
 

L’esempio

Sorry, the comment form is closed at this time.