Кожен більш-менш досвідчений розробник розуміє значимість можливості використання масивів для реалізації тих чи інших завдань у своїх проектах. Якщо говорити про PHP-скрипти то одним з популярних для роботи з масивами є цикл foreach.
На стороні клінта для роботи з html елементами так само може знадобитися можливість використання масивів в циклі, в JQuery така можливість реалізована у вигляді
конструкції $.each.
Одновимірні масиви в jQuery $.each:
$(function(){
var myArray = [“один”, “два”, “три”, “чотири”, “п’ять”];
$.each(myArray, function(index, value){
console.log(“INDEX:” + index + “VALUE”: “+ value);
});
});
В консолі спостерігаємо результат:
один
два
три
чотири
п’ять
За аналогією можна працювати з об’єктами, наприклад, ви використовуєте JSON для обміну даними з сервером, і вам потрібно використовувати дані у циклі.
Об’єкти в циклі jQuery $.each:
$(function(){
var myObjects = [
{
id: 1,
firstname: “Вася”,
lastname: “Пупкін”,
},
{
id: 2,
firstname: “Олександр”,
lastname: “Тіхов”,
},
{
id: 3,
firstname: “Федір”,
lastname: “Корнєв”,
},
];
$.each(myObjects, function(){
console.log(“ID”: “+ this.id);
console.log(“Ім’я:” + this.firstname);
console.log(“Прізвище:” + this.lastname);
console.log(” “);
});
});
Результат:
ID: 1
Ім’я: Вася
Прізвище: Пупкін
ID: 2
Ім’я: Олександр
Прізвище: Тіхов
ID: 3
Ім’я: Федір
Прізвище: Корнєв
Перебір елементів списку за допомогою jQuery $.each
Мабуть, не менш корисна можливість перебору елементів у списку. У нашому прикладі це елементи
- . Ми задамо колір шрифту для всіх елементів списку, за допомогою циклу.
-
Володимир пише:
16.07.2016 у 16:40не правильно дужки стоять у коді:
function(){
// цикл проходить всі теги a на сторінці
$(‘a’).each(function(){
$(this).prop(“href”, “#”); // забираємо з тега посилання
});
// цикл проходить по всім елементам з класом .hide
$(‘.hide’).each(function(){
$(this).hide(); // приховуємо елемент
});
// знаходимо всі теги додаючи до них клас prettyprint
$(‘pre’).each(function(){
$(this).addClass(“prettyprint”);
});
});
Відповісти -
Влад пише:
26.08.2016 у 16:12Володимире, у Вашому коді дійсно не правильно стоять дужки! До чого ставитися передостанній символ Вашого коду?(закриває кругла дужка «)»…) У неї немає відкриває!
http://s018.radikal.ru/i500/1608/77/e261d8ec91e7.jpgВідповісти
$(function(){
$(‘.myList li’).each(function(){
$(this).css(“color”, “green”);
}
});
});
Перебір елементів сторінки за допомогою jQuery $.each
За аналогією з попереднім прикладом, що ми можемо перебрати всі елементи на сторінці, виконуючи з ними які-небудь маніпуляції.
$(function(){
// цикл проходить всі теги на сторінці
$(‘a’).each(function(){
$(this).prop(“href”, “#”); // забираємо з тега посилання
});
// цикл проходить по всім елементам з класом .hide
$(‘.hide’).each(function(){
$(this).hide(); // приховуємо елемент
});
// знаходимо всі теги додаючи до них клас prettyprint
$(‘pre’).each(function(){
$(this).addClass(“prettyprint”);
});
});
На цьому поки все, продовжувати приклади за аналогією можна довго, читайте краще про це в документації, основи основ показано в цьому посту, сподіваюся, матеріал буде вам корисний.
Додав: htmaker, 23.11.2014 р.
(12 голосів, середній: 4,58 з 5)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
Володимир 
Влад 
