jQuery-də each metodu ilə işləmək

Bizdə jQuery vasitəsilə əldə edilmiş elementlər qrupu olduqda, onlara dəyişiklikləri yalnız hamısına eyni anda edə bilərik.

Məsələn, əgər biz tapılan bütün abzasların mətnini dəyişmək istəyiriksə - onu fərqli etmək bacarmayacağıq.

Bu halda bizə each adlı xüsusi metod kömək edəcək, hansı ki, jQuery dəstinə daxil olan bütün elementlərə müəyyən bir funksiyanı tətbiq etməyə imkan verir. Bu funksiyanın daxilində biz elementləri ayıra və hər biri ilə fərqli cür rəftar edə bilərik.

Əslində each elə bir dövrüdür ki, onun köməyilə tapılan bütün elementləri gəzmək olar. Hal-hazırda dövrün keçdiyi elementə istinad this-də yerləşəcək.

Biz sadəcə olaraq bu this-dən xalis JavaScript-də istifadə edə bilərik, necə ki, əvvəllər edirdik, məsələn, belə - this.innerHTML - və elementlərimizin daxili məzmununu çıxarda bilərik. Amma this-i jQuery dollarında belə əhatə etmək daha yaxşıdır - $(this) - bu halda biz ona jQuery-nin bütün metodlarını və zəncirlərini tətbiq edə biləcəyik.

Gəlin aşağıdakı HTML koduna nəzər salaq:

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

Bu nümunədə biz www sinfinə malik bütün elementləri əldə etməli və onların məzmununu ekranda çıxarmalıyıq. Bunu necə edirik: $('.www') köməyilə bizə lazım olan elementləri əldə edirik, sonra isə each(test) köməyilə biz hər bir əldə edilmiş elementə test funksiyasını tətbiq edirik. O, əvvəlcə birinci abzasa tətbiq olunacaq, sonra ikinciyə, üçüncüyə və s.

Funksiya daxilində this, test funksiyasının tətbiq olunduğu elementi göstərəcək - əvvəlcə bu birinci element olacaq, sonra ikinci və s. Belə bir konstruksiya ilə $(this) biz adi JavaScript this yerinə jQuery elementini alacağıq və ona html metodunu tətbiq edəcəyik, hansı ki, bizim elementin mətnini alacaq. Və sonra o, sadəcə ekranda çıxarılacaq:

/*
	test funksiyasının adını dırnaqsız və ()-siz yazırıq,
	çünki bizə onun nəticəsi deyil, kodu lazımdır:
*/

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

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

Bu məsələni həll etmək üçün anonim funksiyalar da tətbiq oluna bilər - bunu daha tez-tez edirlər:

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

Biz həmçinin each metoduna parametrli callback-funksiyası da ötürə bilərik.

Gəlin növbəti nümunədə səhifədəki bütün li-lərə onların sıra nömrəsini əlavə edək. İndi bizim anonim funksiyamıza elementin nömrəsini və özünü ötürəcəyik:

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

İndi isə elem yerinə this istifadə edək:

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

Bütün li-lərin məzmununu onların sıra nömrəsi ilə dəyişin.