logo

Метод jQuery each().

The кожен() Метод у jQuery визначає функцію, яка виконується для кожного відповідного елемента. Це один із широко використовуваних методів обходу в JQuery. Використовуючи цей метод, ми можемо перебирати елементи DOM об’єкта jQuery та виконувати функцію для кожного відповідного елемента.

The кожен() приймає параметр функція (індекс, елемент) це функція зворотного виклику, яка виконується для кожного вибраного елемента. Крім того, для цієї функції необхідні два параметри: індекс і елемент. Отже, ми повинні передати функцію зворотного виклику методу each().

Ми також можемо повернутися помилковий із функції зворотного виклику, щоб зупинити цикл раніше.

Синтаксис

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

Значення параметрів

Значення параметрів, що використовуються в кожен() метод визначаються наступним чином.

функція (індекс, елемент): Це обов'язковий параметр. Це функція зворотного виклику, яка виконується для кожного вибраного елемента. Він має два значення параметрів, які визначаються наступним чином.

java end for цикл
    індекс:Це ціле значення, яке визначає позицію індексу селектора.елемент:Це поточний елемент. Ми можемо використовувати це ключове слово для посилання на відповідний елемент.

Давайте переглянемо кілька ілюстрацій, щоб зрозуміти кожен() метод чітко.

Приклад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().

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

Приклад 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().