О web-разработке
и даже немного больше...

foreach в jQuery, используем jQuery $.each

Каждый более или менее опытный разработчик понимает значимость возможности использования массивов для реализации тех или иных задач в своих проектах. Если говорить о 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
Пожалуй, не менее полезная возможность перебора элементов в списке. В нашем примере это элементы <li> в списке <ul>. Мы зададим цвет шрифта для всех элементов списка, посредством цикла.

$(function(){
	$('.myList li').each(function(){
		$(this).css("color", "green");
	}
	});
});

 
Перебор элементов на странице с помощью jQuery $.each
По аналогии с предыдущим примером, мы можем перебрать все элементы на странице, выполняя с ними какие-либо манипуляции.

$(function(){
	// цикл проходит все теги <a> на странице
	$('a').each(function(){
		$(this).prop("href", "#"); // убираем ссылку из тега
	});
	
	// цикл проходит по всем элементам с классом .hide
	$('.hide').each(function(){
		$(this).hide(); // скрываем элемент
	});
	// находим все теги <pre> добавляя к ним класс prettyprint
	$('pre').each(function(){
		$(this).addClass("prettyprint");
	});
});

На этом пока всё, продолжать примеры по аналогии можно долго, читайте лучше об этом в документации, основы основ показаны в этом посту, надеюсь, материал будет вам полезен.

Опубликован: 23.11.2014 г.

См. также:

Загрузка файлов на сервер посредством Ajax
Отложенная загрузка изображений Lazy Load
Анимация набора текста на Typed.js
Анимация отсчёта на jquery-spincrement
Mega Dropdown — Меню для мобильной версии
Отслеживаем клик вне элемента на JQuery
Ajax-загрузка записей при скроллинге и нажатии кнопки
Stimed – задаем CSS-стили по времени

Комментарии

  1. Владимир пишет:

    не правильно стоят скобки в коде:

    function(){
        // цикл проходит все теги a на странице
        $('a').each(function(){
            $(this).prop("href", "#"); // убираем ссылку из тега
        });
         
        // цикл проходит по всем элементам с классом .hide
        $('.hide').each(function(){
            $(this).hide(); // скрываем элемент
        });
        // находим все теги  добавляя к ним класс prettyprint
        $('pre').each(function(){
            $(this).addClass("prettyprint");
        });
    });
    1. Влад пишет:

      Владимир, в Вашем коде действительно не правильно стоят скобки! К чему относиться предпоследний символ Вашего кода?(закрывающая круглая скобка ")"...) У нее нет открывающей!
      http://s018.radikal.ru/i500/1608/77/e261d8ec91e7.jpg

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта