jQuery-de .each metodu bilen işleşiş

Bizde jQuery ýardamynda alynan elementler toplumy bar bolsa, biz olara üýtgeşiklikleri diňe hemme elementleri üçin bir wagtda girizip bileris.

Mysal üçin, eger biz tapylan ähli abzaslaryň tekstini üýtgetmek islesek, ony dürli etmek bize närazy bolar.

Bu ýagdaýda bizä kömek eder ýörite each metody, ol jQuery toparynyň ähli elementlerine käbir funksiýany ulanyp bilmäge rugsat berýär. Şonuň içinde bu funksiýanyň içinde biz elementleri bölüp we olaryň her biri bilen dürli edip bileris.

Esaslandyryjy ýaly each sikldir, onuň ýardamy bilen tapylan ähli elementleri geçip bileris. Häzirki wagtda sikliň geçýän elementine çykgyt this-da ýerleşer.

Biz diňe şu this-y öňki ýaly, mysal üçin şeýle - this.innerHTML - bizimiň elementlerimiň içki mazmunyny çykarmak üçin ýönekeý JavaScript-de ulanip bileris. Ýöne has gowusy this-y jQuery dollaryna şeýle görnüşde gurmaly - $(this) - bu ýagdaýda biz ona jQuery-niň ähli usullaryny we zynjyrlaryny ulanyp bileris.

Geliň aşakdaky HTML kody gözden geçireliň:

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

Bu mysalda biz www klassyna eýe bolan ähli elementleri alyp we ekrana olaryň mazmunyny çykarmaly. Bu nähili edilýär: $('.www') ýardamy bilen biz zerur elementlerimizi alýarys, soňra each(test) ýardamy bilen biz alynan her elemente test funksiýasyny ulanyarys. Ol ilki bilen birinji abza, soň ikinji, üçünji we ş.m. ulanar.

Funksiýanyň içinde this şol elemente görkezer, ýagny test funksiýasynyň ulanýan elementine - ilki bilen bu birinji element bolar, soň ikinji we ş.m. Şeýle gurluş bilen $(this) biz adaty this-yň ýerine JavaScript-den jQuery elementini alarys we ona html metodyny ulanyp, elementimiźiň tekstini alarys. Şeýlelik bilen, ol diňe ekrana çykarylýar:

/*
	Test funksiýasynyň adyny ýazyň daşynda we ()-syz,
	sebäbi bizä onuň kody gerek, netijesi däl:
*/

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

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

Bu meseläni çözmek üçin anonim funksiýalary hem ulanmak bolýar - bu köplenç edilýär:

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

Şeýle hem, biz each metoduna parametrli callback-funksiýasyny geçirip bileris.

Geliň indiki mysalda sahypadaky ähli li-lere olaryň tertip belgisini goşalyň. Indi biziň anonim funksiýamyza elementleriň belgisini we elementiniň özünü geçireris:

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

Indi bolsa elem-iň ýerine this-y ulanýarys:

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

Ähli li-leriň mazmunyny olaryň tertip belgisi bilen çalyşyň.