Având în vedere că scriu foarte rar din cauza timpului limitat pe care îl am, m-am gândit să vă explic puțin despre liste și cum le parcurgem cu jQuery în caz de necesitate. Eu le-am folosit foarte mult în ultima perioada pentru versatilitatea de care dau dovada. Exemplul pe care se poate aplica foarte usor este un playlist.

În primul rând o să fac o listă cu necesitățile pentru a face chestia să funcționeze:

• ultimul release jQuery (in acest moment v1.3.2)
• vreo 20minute libere

Bun, acum trebuie să facem o simplă listă neordonată. Asta ar arăta în felul următor:

 
<ul id="unordered_list">
<li class="current">Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
 

ID-ul listei si clasa primului element din listă ne vor folosi puțin mai târziu când ne vom "plimba" prin listă cu Javascript, așa că luați-le "as is". Și dacă tot ne vom juca prin elemente ar fi bine să definim o clasă de CSS pentru elementul curent. Eu am fost puțin mai interesat de subiect decât de felul în care arată așa că am făcut următoarea clasă:

.current { background: yellow; }

Bun, acum nu ne mai trebuie decât 4 butoane: pentru a adăuga elemente, pentru a șterge elemente, pentru a trece la elementul următor și la cel precedent. Asta s-ar traduce prin:

 
<input id="add" type="button" value="Add new item" />
<input id="remove" type="button" value="Remove item" />
<input id="prev" type="button" value="Previous item" />
<input id="next" type="button" value="Next item" />

În acest moment suntem gata să scriem Javascript. Două funcții importante pe care le vom folosi în exemplul de mai jos sunt cele care îmi vor întoarce numarul elementelor din listă și poziția elementului curent.

function ul_size()
{
	var size = $("#unordered_list").children('li').size();
	$(".size").text('Size: '+size);
 
	return size;
}
 
function ul_pos()
{
	var current_pos = $(".current").prevAll().length;
	$(".current_pos").text('Current: '+current_pos);
 
	return current_pos;
}

Puteți ignora momentan metoda .text(). Pe scurt, funcția ul_size() numără elementele de tip li din lista noastră, iar funcția ul_pos() numără toate elementele dinaintea celui curent. Acum mai trebuie doar să adăugăm acțiuni pe cele 4 butoane de care vorbeam mai sus.

$("#add").click(function ()
{
	var size = $("#unordered_list").children('li').size();
	$("#unordered_list").append('
<li>Item '+size+'</li>
 
');
 
	ul_size();
});
 
$("#remove").click(function ()
{
	if(ul_size() != 1)
	{
		$("#unordered_list li:last").remove();
		ul_size();
	}
});
 
$("#prev").click(function ()
{
	if(ul_pos() != 0)
	{
		$(".current").removeClass('current').prev('li')
                     .addClass('current');
		ul_pos();
	}
});
 
$("#next").click(function ()
{
	if(ul_size() &gt; ($(".current").prevAll().length)+1)
	{
		$(".current").removeClass('current').next('li')
                     .addClass('current');
		ul_pos();
	}
});

Am pregătit și un exemplu pe care îl puteți vedea aici.

Dacă aveți întrebări, comentarii sau sugestii, folosiți formularul de mai jos.