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-ის შიგთავსი მათ რიგით ნომერზე.