logo

Метод на jQuery each().

The всеки () метод в jQuery указва функция, която се изпълнява за всеки съответстващ елемент. Това е един от широко използваните методи за преминаване в JQuery. Използвайки този метод, можем да итерираме DOM елементите на обекта jQuery и можем да изпълним функция за всеки съответстващ елемент.

The всеки () приема параметър функция (индекс, елемент) което е функция за обратно извикване, която се изпълнява за всеки избран елемент. Освен това тази функция по избор изисква два параметъра, които са индекс и елемент. Така че трябва да предадем функция за обратно извикване на метода each().

Можем и да се върнем невярно от функцията за обратно извикване, за да спрете цикъла по-рано.

Синтаксис

 $(selector).each(function(index, element)) 

Стойности на параметрите

Стойностите на параметрите, използвани в всеки () метод се определят както следва.

функция (индекс, елемент): Това е задължителен параметър. Това е функция за обратно извикване, която се изпълнява за всеки избран елемент. Той има две стойности на параметъра, които са дефинирани по следния начин.

    индекс:Това е цяло число, което определя позицията на индекса на селектора.елемент:Това е текущият елемент. Можем да използваме тази ключова дума, за да препратим съвпадащия в момента елемент.

Нека видим някои илюстрации, за да разберем всеки () метод ясно.

Пример1

В този пример, всеки () метод ще се задейства при щракване върху бутона. Ние прилагаме този метод към че елементи. Така че този метод ще повтори всеки че елемент. Функцията се изпълнява за всеки избран че и показва текста на съответния че елемент, използващ поле за предупреждение.

Тук не използваме стойностите на параметрите на функцията за обратно извикване.

 jQuery each() method <h2> Welcome to the javaTpoint.com </h2> <ul> <li> First element </li> <li> Second element </li> <li> Third element </li> <li> Fourth element </li> </ul> <p> Click the following button to see the list of <b> li </b> elements. </p> Click me function fun(){ $(document).ready(function(){ $(&apos;li&apos;).each(function(){ alert($(this).text()) }); }); } 

Изход

Тествайте сега

След изпълнението на горния код, изходът ще бъде -

Метод на jQuery each().

При щракване върху бутона ще се покаже предупреждение, както следва.

Метод на jQuery each().

По същия начин ще се покажат четири полета за предупреждение поради четири че елементи.

разархивиране в linux

Пример2

В този пример използваме стойностите на параметрите на функцията за обратно извикване, които са индекс и елемент .

Ние прилагаме всеки () метод на че елементи. И така, методът ще обхожда елементите li, започвайки от index 0 . Ще се изпълни на всеки избран че елемент и променете цвета на фона на съответния елемент.

Итерацията спира, след като функцията се върне невярно . Ето, има шест че елементи и функцията спира, когато достигне до елемента с id = 'i4' . Въпреки че е четвъртият елемент, но индексът започва от 0 , така че позицията на елемента е 3 .

 jQuery each() method body{ text-align: center; } ul{ list-style-type: none; float: left; } li { width: 40px; height: 40px; margin: 5px; padding: 5px; font-size: 20px; float: left; border: 2px solid blue; } button{ font-size: 20px; } <h2> Welcome to the javaTpoint.com </h2> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li id="i4"> Stop </li> <li> 5 </li> <li> 6 </li> </ul> Click me function fun() { $(document).ready(function(){ $(&apos;li&apos;).each(function(index, element) { $(element).css(&apos;background&apos;, &apos;lightgreen&apos;); if ($(this).is(&apos;#i4&apos;)) { $(&apos;p&apos;).text(&apos;Index begins with 0. So, the function stopped at position: &apos; + index ).css(&apos;fontSize&apos;, &apos;20px&apos;); return false; } }); }); } 

Изход

Тествайте сега

След изпълнение на горния код и щракване върху дадения бутон, изходът ще бъде -

Метод jQuery each().