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");
	});
});

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