Puna me metodën each në jQuery

Kur kemi një grup elementësh, të marrë me anë të jQuery, ne mund të bëjmë ndryshime në to vetëm për të gjithë elementët njëkohësisht.

Për shembull, nëse duam të ndryshojmë tekstin e të gjithë paragrafëve të gjetur - nuk do të jemi në gjendje ta bëjmë atë të ndryshëm.

Në këtë rast do të na ndihmojë një metodë e veçantë each, që lejon të aplikojë ndonjë funksion për të gjithë elementët e një grupi jQuery. Në këtë rast brenda këtij funksioni ne do të jemi në gjendje të ndajmë elementët dhe të veprojmë ndryshe me secilin prej tyre.

Në thelb each është një cikël, me ndihmën e të cilit mund të përsëritemi mbi të gjithë elementët e gjetur. Lidhja me atë element, mbi të cilin aktualisht po kalon cikli do të gjendet në this.

Ne thjesht mund të përdorim këtë this në JavaScript të pastër, siç kemi bërë më parë, për shembull, kështu - this.innerHTML - dhe të shfaqim përmbajtjen e brendshme të elementëve tanë. Por është më mirë ta mbështjellim this me dollar jQuery në këtë mënyrë - $(this) - në këtë rast ne do të mund t'i aplikojmë atij të gjitha metodat dhe zinxhirët e jQuery.

Le të shqyrtojmë kodin HTML vijues:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

Në këtë shembull ne duhet të marrim të gjithë elementët me klasën www dhe të shfaqim në ekran përmbajtjen e tyre. Si bëhet: me ndihmën e $('.www') ne marrim elementët që na duhen, pastaj me ndihmën e each(test) ne për çdo element të marrë aplikojmë funksionin test. Ai fillimisht do të aplikohet në paragrafin e parë, pastaj në të dytin, në të tretin dhe kështu me radhë.

Brenda funksionit this do të tregojë te elementi, të cilit i aplikohet funksioni test - fillimisht ky do të jetë elementi i parë, pastaj i dyti, dhe kështu me radhë. Me ndihmën e një konstruksioni të tillë $(this) ne në vend të një this të zakonshëm nga JavaScript do të marrim një element jQuery dhe do t'i aplikojmë atij metodën html, e cila do të marrë tekstin e elementit tonë. Epo, dhe pastaj ai thjesht do të shfaqet në ekran:

/*
	Emrin e funksionit test e shkruajmë pa thonjëza dhe (),
	sepse na duhet kodi i tij, dhe jo rezultati:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

Për zgjidhjen e kësaj detyre mund të përdoren edhe funksione anonime - kështu bëhet më shpesh:

$('.www').each(function() {
	alert($(this).html());
});

Gjithashtu ne mund t'i kalojmë metodës each një funksion callback me parametra.

Le të shtojmë në shembullin vijues në fund të gjitha li në faqe numrin e tyre rendor. Tani në funksionin tonë anonim do të kalojmë numrin e elementit dhe vetë elementin:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

Dhe tani në vend të elem përdorim this:

$('li').each(function (index) {
	$(this).append(index);
});

Ndryshoni përmbajtjen e të gjitha li me numrin e tyre rendor.