jQuery.each()

посл. ред. 19.12.2016

Функция jQuery.each() является перебирающей функцией, которая может использоваться как для массивов, так и для простых объектов. Массивы и массивоподобные объекты со свойством length (например, псевдомассив arguments внутри функций или любой jQuery-объект) перебираются по индексу - от 0 до length-1. Простые объекты перебираются по свойствам. Если простой объект будет иметь свойство length, тогда корректная работа функции не гарантируется.

Во время перебора для каждого элемента массива или для каждого свойства объекта запускается переданная вторым аргументом функция. Если в любой момент выполнения данная функция возвращает значение false (с помощью директивы return), тогда jQuery.each() останавливает перебор свойств. Если возвращается любое другое значение, тогда выполняется переход к следующему свойству. После завершения перебора функция jQuery.each() возвращает ссылку на перебираемый объект (массив).

Варианты использования

jQuery.each(массив, функция) => Array: Запускает указанную функцию для каждого элемента массива. Переданная функция может принимать два аргумента: индекс текущего элемента и его значение.
jQuery.each(объект, функция) => Object: Запускает указанную функцию для каждого свойства объекта. Переданная функция может принимать два аргумента: имя текущего свойства и его значение.

Примеры

<html>
<head>
  <title>Функции библиотеки jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p></p>
  <p></p>
  <p></p>
</body>
</html>
 
<script>
var pars = document.body.querySelectorAll('p');
/* список всех параграфов - массивоподобный объект */

/* функция радектирует первые 2 параграфа */
$.each(pars, function(index, elem) {
  index++;
  elem.innerHTML = index + '-й параграф';
  return (index < 2);
});
</script>

1-й параграф

2-й параграф

<html>
<head>
  <title>Функции библиотеки jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p></p>
</body>
</html>
 
<script>
var age = {
  'Вася': 16,
  'Петя': 18,
  'Ваня': 15
};

/* функция выводит свойства объекта */
$.each(age, function(prop, value) {
  document.body.firstElementChild.innerHTML += prop + ': ' + value + '<br>';
});
</script>

Вася: 16
Петя: 18
Ваня: 15