Liste sequenziali ed elementi consecutivi con jQuery

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>