jQuery-ում each մեթոդի աշխատանքը

Երբ մենք ունենք տարրերի խումբ, որոնք ստացվել են jQuery-ի միջոցով, մենք կարող ենք դրանցում փոփոխություններ կատարել միայն բոլոր տարրերի համար միաժամանակ։

Օրինակ, եթե մենք ցանկանում ենք փոխել գտնված բոլոր պարբերությունների տեքստը՝ մեզ չի հաջողվի դարձնել այն տարբեր։

Այս դեպքում մեզ կօգնի հատուկ each մեթոդը, որը թույլ է տալիս կիրառել որևէ ֆունկցիա jQuery-ի հավաքածուի բոլոր տարրերի նկատմամբ։ Այդ ֆունկցիայի ներսում մենք կկարողանանք տարանջատել տարրերը և տարբեր կերպ վարվել դրանցից յուրաքանչյուրի հետ։

Ըստ էության each-ը հանդիսանում է ցիկլ, որի օգնությամբ կարելի է դասավորել բոլոր գտնված տարրերը։ Այն տարրի հղումը, որի վրա այժմ անցնում է ցիկլը, կգտնվի this-ում։

Մենք կարող ենք ուղղակի օգտվել այս this-ից մաքուր JavaScript-ում, ինչպես դա արել ենք նախկինում, օրինակ, այսպես - this.innerHTML - և ցուցադրել մեր տարրերի ներքին պարունակությունը։ Սակայն ավելի լավ է փաթաթել this-ը jQuery-ի դոլարի մեջ այսպես - $(this) - այս դեպքում մենք կկարողանանք կիրառել դրա նկատմամբ jQuery-ի բոլոր մեթոդներն ու շղթաները։

Դիտարկենք հետևյալ HTML կոդը։

<p class="www">տեքստ</p>
<p class="www">տեքստ</p>
<p class="www">տեքստ</p>
<p>տեքստ</p>

Այս օրինակում մենք պետք է ստանանք բոլոր տարրերը www դասով և ցուցադրենք էկրանին դրանց պարունակությունը։ Ինչպես է դա արվում. օգտագործելով $('.www') մենք ստանում ենք մեզ անհրաժեշտ տարրերը, ապա օգտագործելով each(test) մենք յուրաքանչյուր ստացված տարրի նկատմամբ կիրառում ենք test ֆունկցիան։ Այն նախ կկիրառվի առաջին պարբերության նկատմամբ, ապա երկրորդի, երրորդի և այլն։

Ֆունկցիայի ներսում this-ը ցույց կտա այն տարրը, որի նկատմամբ կիրառվում է ֆունկցիան test - նախ այն կլինի առաջին տարրը, ապա երկրորդը, և այլն։ Օգտագործելով այսպիսի կոնստրուկցիա $(this) մենք սովորական this-ի փոխարեն JavaScript-ից կստանանք jQuery տարր և կկիրառենք դրա նկատմամբ html մեթոդը, որն կստանա մեր տարրի տեքստը։ Իսկ հետո այն ուղղակի կցուցադրվի էկրանին.

/*
	Ֆունկցիայի test անունը գրում ենք առանց չակերտների և (),
	քանի որ մեզ անհրաժեշտ է դրա կոդը, ոչ թե արդյունքը.
*/

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

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

Այս խնդիրը լուծելու համար կարելի է կիրառել նաև անանուն ֆունկցիաներ. դա արվում է ամենից հաճախ.

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

Նաև մենք կարող ենք each մեթոդին անցկացնել callback-ֆունկցիա պարամետրերով։

Հաջորդ օրինակում եկեք ավելացնենք վերջում էջի բոլոր li տարրերին դրանց հերթական համարը։ Այժմ մեր անանուն ֆունկցիային մենք կանցկացնենք տարրի համարը և հենց տարրը.

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

Իսկ այժմ elem-ի փոխարեն օգտագործենք this-ը.

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

Փոխեք բոլոր li տարրերի պարունակությունը դրանց հերթական համարով։