Imparare ad utilizzare jQuery per scrivere qualcosa di sequenziale in modo semi-dinamico, è un processo che ci permette di ridurre i tempi (e le righe) di codice e di garantire maggior elasticità ai nostri script per poter aggiungere elementi in futuro. Vediamo quindi come incrementare, ad esempio dei commenti, di volta in volta. L’esempio che vediamo è molto semplice e lo scopo è quello di dare solo un input sulle potenzialità e le meccaniche di funzionamento, sta poi alle varie esigenze e alla creatività di ognuno farne un uso sempre migliore ;)!
jQuery per incrementare
Scarichiamo jQuery, includiamolo nella nostra pagina html, ed andiamo a scrivere direttamente il codice che useremo:
$(document).ready(function(){ $("#lista_commenti li").each(function (i) { i = i+1; $(this).prepend('<span class="numero_commento"> #'+i+'</span>'); }); });
E’ tutto molto semplice, quello che stiamo facendo infatti è letteralmente questo:
Per ogni (.each()) elemento lista (#lista_commenti li) eseguiamo una funzione passando il parametro i. Quanto vale i? Vale i+1, quindi 0+1, poi 1+1=2, 3 ecc… In seguito appendiamo (.prepend()) uno span (dentro l’elemento <li> ma prima di qualsiasi altro elemento in esso contenuto; è questa la funzione di prepend) nel quale mostriamo il valore di i, quindi un numero che incrementa per ogni elemento.
Riporto quindi, per comodità, anche l’html e il css per vedere qualcosa di “decente”:
<ol id="lista_commenti"> <li> <p><cite>Simone:</cite></p> <p class="ora">8 Febbraio, 2009 alle 5:38</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. </p> </li> <li> <p><cite>Andrea:</cite></p> <p class="ora">8 Febbraio, 2009 alle 5:38</p> <p>Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante. Mauris aliquam leo at pede pharetra condimentum. </p> </li> <li> <p><cite>Celeste:</cite></p> <p class="ora">8 Febbraio, 2009 alle 5:38</p> <p>Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. </p> </li> </ol>
body { width: 500px; margin: 20px auto; color: #999; font: 90%/150% Arial, Helvetica, sans-serif; } * { margin: 0; padding: 0; } a { color: #333; } #lista_commenti { margin: 10px 0 40px; padding: 0; } #lista_commenti li { padding: 10px 0 20px; list-style: none; border-top: solid 1px #ccc; position: relative; } #lista_commenti cite { font: bold 140%/110% Arial, Helvetica, sans-serif; color: #666; } #lista_commenti .ora { color: #ccc; margin: 0 0 10px; } #lista_commenti .numero_commento{ position: absolute; right: 0; top: 8px; font: normal 200%/100% Georgia, "oras New Roman", oras, serif; color: #ccc; }
Ed ecco il risultato di quello che stavamo cercando di realizzare:
che restituisce come output:
<ol id="lista_commenti"> <li><span class="numero_commento"> #1</span> <p><cite>Simone:</cite></p> <p class="ora">8 Febbraio, 2009 alle 5:38</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. </p> </li> <li><span class="numero_commento"> #2</span> <p><cite>Andrea:</cite></p> <p class="ora">8 Febbraio, 2009 alle 5:38</p> <p>Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante. Mauris aliquam leo at pede pharetra condimentum. </p> </li> <li><span class="numero_commento"> #3</span> <p><cite>Celeste:</cite></p> <p class="ora">8 Febbraio, 2009 alle 5:38</p> <p>Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. </p> </li> </ol>