Как использовать функцию jQuery .each(): примеры
jQuery — это фреймворк JavaScript, который был создан, чтобы упростить взаимодействие JS и HTML. Его можно скачать с домашней страницы проекта.
В этой статье мы рассмотрим, как и где можно использовать одну из самых популярных функций jQuery — .each() на реальных примерах. Разберем, как можно перебирать элементы HTML, массивы, объекты или данные JSON с ее помощью.
Функцию .each() можно использовать для итерации:
- по массиву (цикл
forEach); - по массиву объектов;
- по элементу HTML (тег
<li>); - над сложными данными JSON;
- по строкам таблицы (тег
<tr>).
Давайте рассмотрим каждый способ использования функции jQuery .each() более детально.
Синтаксис функции jQuery .each()
Функция .each считается одной из самых используемых в jQuery. Она необходима для переборов элементов объекта.
Объект обладает элементами DOM и предоставляет функции jQuery. Также jQuery предлагает вспомогательную функцию с таким же именем ((selector).each()) : ее особенность в том, что ее можно вызывать без предварительного выбора или создания DOM.
Например, с помощью .each можно осуществлять итерацию по массиву объектов с некоторыми данными. Это очень удобно. В этом случае код будет выглядеть так:
var obj= [
{ FirstName: "Andrea" , LastName: "Ely", Gender: "F"},
{ FirstName: "John" , LastName: "Shaw", Gender: "M"},
{ FirstName: "Leslie" , LastName: "Mac", Пол: "F"},
{ FirstName: "David" , LastName: "Miller", Gender: "M"},
{ FirstName: "Rehana" , LastName: "Rewa", Gender: "F"}
]
$.each(obj, function (index, value) {
var first_name=value.FirstName;
var last_name=value.LastName;
console.log(first_name+""+last_name);
});
Давайте посмотрим на результат, который отображает FirstName и LastName из объектной переменной:
- Andrea Ely
- John Shaw
- Leslie Mac
- David Miller
- Rehana Rewa
Примеры использования функции jQuery .each ()
Ниже представлены два примера работы функции с объектом. Первый вариант использования выбирает все элементы на веб-странице, а затем выводит href (адрес документа, на который нужно перейти):
$('a').each(function (index, value){
console.log($(this).attr('href'));
});
Второй вариант использования выводит внешние href (если присутствует HTTP):
$('a').each(function (index, value){
var link = $(this).attr('href');
if (link.indexOf('http://') === 0) {
console.log(link);
}
});
Использование функции jQuery .each() в массиве
Например, у нас есть массив с некоторыми значениями в нем. Как вы видите ниже, myArray — это переменная массива, которая содержит значения в виде названий некоторых фруктов.
Представим, что нужно отобразить все названия фруктов по одному. Используя функцию .each, можно выполнить итерацию по этой переменной массива и отобразить все значения элементов:
var myArray = ["apple", "mango", "orange", "grapes", "banana"];
$.each(myArray, function (index, value) {
console.log(index+' : '+value);
});
Давайте посмотрим на результат, который отображает индекс и значения:
0 : apple 1 : mango 2 : orange 3 : grapes 4 : banana
Пример класса jQuery .each()
В этом примере выполняется цикл по HTML-элементу, то есть по тегу <li>:
<ul id="ul_Items"> <li class='fruits' >Apple</li> <li class='fruits' >Mango</li> <li class='automobile' >Honda Accord</li> <li class='automobile' >Harley Davidson</li> <li class='fruits' >Oranges</li> <li class='fruits' >Grapes</li> <li class='automobile' >Royal Enfield</li> </ul>
Нам нужно использовать функцию .each(), которая будет перебирать теги <li>, получать текст каждого из них и отображать его:
$("#ul_Items li").each(function(){
var self=$(this);
console.log(self.text());
});
Давайте ознакомимся с другим способом:
$.each($("#ul_Items li"),function(){
var self=$(this);
console.log(self.text());
});
Вот так будет выглядеть результат, который отображает текст с помощью использования цикла по классам:
- Apple
- Mango
- Honda Accord
- Harley Davidson
- Oranges
- Grapes
- Royal Enfield
Пример JSON JQuery .each()
Представим, что нам нужно выполнить итерации над сложными JSON-данными. В этом случае нужно работать с вложенными .each() для получения соответствующих данных.
Давайте ознакомимся с JSON-данными, в которых записаны названия компаний, а также id моделей и их названия:
var json = [{"Company_ID":"101",
"Company_Name":"iPhone",
"Models":[
{"Model_ID":"101-M1","Model_Name":"iPhone SE"},
{"Model_ID":"101-M2","Model_Name":"iPhone 11"},
{"Model_ID":"101-M3","Model_Name":"iPhone X Pro"}]
},
{"Company_ID":"201",
"Company_Name":"Vivo",
"Models":[
{"Model_ID":"201-M1","Model_Name":"Vivo Z1X Pro"},
{"Model_ID":"201-M2","Model_Name":"Vivo 17 Pro"},
{"Model_ID":"201-M3","Model_Name":"Vivo UD"}]
}];
Предположим, необходимо отобразить в таблице все названия компаний с названиями соответствующих моделей. Для этого добавим тег <table> на веб-страницу, который будет использоваться для отображения данных JSON.
Допустим, это наша HTML-разметка:
<table id="myTable" class="table"> <tr> <th>Company Name</th> <th>Models</th> </tr> </table>
Теперь добавим в переменную modelHTML все детали модели, которые затем добавятся во фрагмент переменной. Потом он добавляется в myTable, который является элементом таблицы:
var fragment="";
var modelHTML="";
$.each(json, function (index, value) {
// теперь есть название компании,
var Company_ID=value.Company_ID;
var Company_ID=value.Company_Name;
//тут необходимо сделать вложенный цикл для получения подробной информации о моделях.
var objModel=value.Models;
modelHTML +="";
$.each(objModel, function (ind, val) {
var Model_ID=val.Model_ID;
var Model_Name=val.Model_Name;
modelHTML +="<li>"+Model_Name+"</li>";
});
modelHTML +="<ul>";
fragment +="<tr><td>"+Company_ID+"</td> <td>"+modelHTML+" </td></tr>";
modelHTML="";
});
$("#myTable").append(fragment);
Теперь давайте представим более практичный сценарий, когда пользователь хочет отобразить только названия фруктов. Поскольку в HTML-разметку были добавлены имена класса для каждого тега <li> (fruits и automobile), можно фильтровать теги. Это происходит благодаря классам:
$("#ul_Items li").each(function(){
var self=$(this);
// это будет проверять, есть ли у li класс fruits, если есть, то будет отображаться только он,
if(self.hasClass("fruits"))
{
console.log(self.text());
}else
{
// другая логика кода
}
});
Предположим, что необходимо показать только тег <li> с названиями фруктов. Лучшим способом для этого будет выбрать только эти теги и перебрать их, а не перебирать все теги <li>, как показано в примере выше.
Давайте посмотрим на код для перебора тегов <li>, имеющих класс fruits:
$("#ul_Items li.fruits").each(function(){
var self=$(this);
console.log(self.text());
});
Все удалось, получаем результат:
- Apple
- Mango
- Oranges
- Grapes
Пример задержки с помощью jQuery .each ()
Предположим, нам необходимо, чтобы элементы списка становились зеленого цвета, когда человек использует элемент с идентификатором 5demo. Ниже представлен код, где элемент будет скрываться в зависимости от индекса задержки (0, 150, 350, 550 мс):
$('#5demo').bind('click', function (e) {
$('li').each(function (index) {
$(this).css('background-color', 'green')
.delay(index * 200)
.fadeOut(1500);
});
e.preventDefault();
})
Пример итерации по строкам таблицы с помощью .each ()
Чтобы прочитать значение каждой ячейки таблицы также можно использовать функцию jQuery .each(). Каждая строка таблицы <tr> получает данные, выполняя цикл forEach в HTML-таблице:
<table id="myTable" style="margin-left:50px;"> <tr><th>Sr no</th><th>Name</th><th>Gender</th><th>Location</th></tr> <tr><td> 1</td><td>Satinder Singh</td><td> M </td><td> India </td></tr> <tr><td> 2 </td><td>Amit Sarna</td><td> M </td><td> France </td></tr> <tr><td> 3 </td><td>Andrea Ely</td><td> F </td><td> Brazil </td></tr> <tr><td> 4 </td><td>Leslie Mac </td><td> F </td><td> Australia </td></tr> <tr><td> 5 </td><td>Sonya David </td><td> F </td><td>America</td></tr> </table>
Используя метод .each(), мы получаем значение каждой ячейки строки таблицы, то есть каждое значение <td>:
$(".button").on('click', function () {
$("#myTable tr").each(function () {
var self = $(this);
var col_1_value = self.find("td:eq(0)").text().trim();
var col_2_value = self.find("td:eq(1)").text().trim();
var col_3_value = self.find("td:eq(2)").text().trim();
var col_4_value = self.find("td:eq(3)").text().trim();
var result = col_1_value + " - " + col_2_value + " - " + col_3_value + " - " + col_4_value;
console.log(result);
});
});
Как использовать метод .each() в Vanilla JavaScript?
Метод .each() также может быть воспроизведен в Vanilla JavaScript с помощью встроенных методов. В качестве примера рассмотрим следующий список:
<ul class="team-standings">
<li>Mercedes</li>
<li>Ferrari</li>
<li>Red Bull Racing</li>
<li>Renault</li>
<li>Haas Ferrari</li>
</ul>
Если бы мы использовали .each() для итерации по элементам, код был бы следующим:
$('.team-standings li').each(function(index) {
// текущий элемент
console.log($(this).text()));
console.log(index);
});
Того же самого можно добиться в JavaScript, используя цикл forEach() и собственные функции селектора:
document.querySelectorAll: этот метод возвращает массив элементов, соответствующих указанному CSS-селектору;document.querySelector: этот метод возвращает первый элемент, который соответствует указанному селектору CSS. В отличие отdocument.querySelectorAll, который возвращает массив, этот метод возвращает только один результат.
Тот же код в Vanilla JS будет выглядеть так:
var li = document.querySelectorAll('.team-standings li');
li.forEach(function(element, index) {
// текущий элемент DOM
console.log(element.textContent);
console.log(index);
});
Вместо .this в jQuery можно получить текущий элемент DOM через первый параметр функции обратного вызова forEach().
Заключение
Как показывает практика, функцию .each() лучше использовать почаще — она позволяет справиться с большим количеством проблем. Если вы не занимаетесь разработкой в jQuery, рекомендуем использовать forEach() для массивов ECMAScript 5.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: