5 Прикладів використання функції jquery
Функція each jQuery використовується для перебору елементів об'єкта jQuery. Він містить один або кілька елементів DOM і надає всі функції jQuery. Додатково jQuery надає допоміжну функцію з тим же ім'ям, яка може бути викликана без попереднього вибору або створення елементів DOM. Давайте дізнаємося про це більш детально.
Синтаксис функції jQuery .each ()
У наступному прикладі ми вибираємо на веб-сторінці всі елементи div і виводимо індекс і ідентифікатор кожного з них. Можливий результат: "div0: header", "div1: body", "div2: footer". У прикладі використовується функція jQuery each (). а не допоміжна:
У наступному прикладі продемонстровано використання допоміжної функції. В даному випадку об'єкт, для якого виконується цикл, задається як перший аргумент. У цьому прикладі я покажу, як перебрати масив через цикл за допомогою jQuery each function:
В останньому jQuery each прикладі я хочу представити цикли через властивості об'єкта:
Все це зводиться до формування належного зворотного виклику. Контекст зворотного виклику this буде дорівнює другому аргументу, який є поточним значенням. Але оскільки контекст завжди буде об'єктом, то прості значення повинні бути «обгорнуті». Тому суворе рівність між значенням і контекстом не може бути задано. Перший аргумент - поточний індекс, який є числом для jQuery each array або рядком (для об'єктів).
- Основний приклад використання функції jQuery .each ()
Давайте подивимося, як функція each () застосовується в поєднанні з об'єктом jQuery. У першому прикладі вибираються всі елементи a на сторінці, і виводиться їх атрибут href:
У другому прикладі використання jQuery each object виводяться всі зовнішні href на веб-сторінці (за умови, що використовується протокол HTTP):
Припустимо, що на сторінці є такі посилання:
Другий код видасть:
Елементи DOM з об'єкта jQuery при використанні всередині each () необхідно знову «обернути». Тому що сам jQuery - це фактично контейнер для масиву елементів DOM. За допомогою jQuery each function цей масив обробляється так само, як і звичайний. Тому ми не отримуємо загорнуті елементи відразу після обробки.
- Приклад масиву jQuery.each ()
Ще раз розглянемо, як можна обробляти звичайний масив:
Результат виконання коду: 0: 1, 1: 2, 2: 3, 3: 4, 4: 5 і 5: 6.
Масив містить числові індекси, тому ми отримуємо числа, починаючи з 0 і до N - 1. де N - кількість елементів в масиві.
У нас можуть бути більш складні структури даних, такі як масиви в масивах, об'єкти в об'єктах, масиви в об'єктах або об'єкти в масивах. Давайте розглянемо, як jQuery find each може застосовуватися в подібних сценаріях:
Результат виконання коду: red = # f00, green = # 0f0, blue = # 00f.
Ми обробляємо структуру за допомогою вкладеного виклику each (). Зовнішній виклик обробляє масив змінної JSON. внутрішній виклик обробляє об'єкти. У цьому прикладі кожен jQuery each element має тільки один ключ. Але за допомогою представленого коду може бути присвоєно будь-яку кількість ключів.
Цей приклад демонструє, як перебрати кожен елемент з класом productDescription:
Разом з селектором ми використовуємо допоміжну функцію each () замість методу each ():
Результат використання jQuery each function буде наступним: 0: Червоний. 1: Помаранчевий. 2: Зелений.
Нам не потрібно використовувати індекс і значення. Це параметри, які допомагають визначити, який елемент DOM в даний час обробляється циклом. Крім цього в сценарії можна використовувати більш зручний метод each ():
Потрібно обернути елемент DOM в новий екземпляр jQuery. Ми використовуємо метод text () для отримання тексту елемента.
- Приклад затримки з допомогою jQuery.each ()
В даному jQuery each прикладі, коли користувач натискає на елемент з ідентифікатором 5demo. для всіх елементів списку встановлюється помаранчевий колір. Після залежною від індексу затримки (0, 200, 400. мілісекунд) ми поступово приховуємо елемент:
висновок
Рекомендується використовувати jQuery each function. коли це тільки можливо. Це дозволяє вирішити безліч проблем! Поза jQuery розробки краще використовувати функцію forEach () будь-якого масиву ECMAScript 5.
Пам'ятайте: $ .each () і $ (selector) .each () - це два різних методу, що визначаються по-різному.
Переклад статті «5 jQuery each () Function Examples» дружною командою проекту Сайтобудування від А до Я.