jQuery выполнить код для каждого найденного элемента - PullRequest
Новая
       8

jQuery выполнить код для каждого найденного элемента

8 голосов
/ 18 июня 2011

У меня есть список, и я использую jQuery для получения каждого LI в списке: 

$('ul li')

Как мне получить его, чтобы я запускал код после того, как найден каждый элемент, но не событие;вот так: 

$('ul li').code(function() {
    alert('this will alert for every li found.');
});

Какой лучший способ для меня это сделать?

Ответы [ 2 ]

22 голосов
/ 18 июня 2011

В jQuery есть два типа циклов: явный и неявный .

Явные циклы

Явные циклы - это циклы, которые вы вызываете явно.Если у вас есть массив значений, который вы хотите циклически просмотреть, вы можете использовать метод $.each(): 

$.each( [ '#a', '#b', '#c' ], function( index, value ) {
  $( value ).css("color", "red");
});

jQuery будет затем циклически перебирать все значения в вашем массиве и запускать анонимную функциюпосле этого.В эту функцию он передаст два значения: текущий индекс значения, к которому он прикасается, и само значение.Так что, если мы на нашем первом прогоне, индекс будет 0, а значение будет #a.

Так что, если мы начали с: 

<p id="a">A</p>
<p id="b">B</p>
<p id="c">C</p>

После запуска нашего явногоцикл, наш результат будет: 

<p id="a" style="color:red">A</p>
<p id="b" style="color:red">B</p>
<p id="c" style="color:red">C</p>

Конечно, вы не ограничены массивами и другими коллекциями, созданными вручную при использовании метода $.empty().Вы также можете связать этот метод сразу с вашим селектором (заметьте, технически это другой $.each() метод): 

$("ul li").each(function( index ){
  $(this).css("color", "red");
});

Этот метод специально предназначен для циклического перемещения по объекту jQuery.Каждая итерация представляет текущий элемент как this в вашей анонимной функции.Итак, вернувшись к нашему более раннему примеру, мы могли бы сделать следующее: 

$("#a, #b, #c").each(function( index ){
  $(this).css("color", "red");
});

Таким образом, для каждого сопоставленного элемента мы выполним нашу анонимную функцию.jQuery передаст нам индекс, чтобы мы могли отслеживать наш прогресс по соответствующим элементам.При первом проходе index будет 0, а this будет означать #a.Во второй раз индекс будет равен 1, а this будет ссылаться на #b.

. Пока явные циклы соблазняют, обратите внимание, что они могут добавить ненужные издержки вашему приложению.jQuery уже выполняет цикл самостоятельно, когда у него есть несколько совпадающих элементов.Этот цикл называется неявным циклом, и время от времени мы можем использовать его для удовлетворения наших потребностей при одновременном повышении производительности.

Неявные циклы

Неявные циклы выполняются автоматически внутриСам jQuery, например, с вашим кодом: 

$("ul li").css("color", "red");

jQuery выполнил цикл по всем соответствующим элементам li и установил их цвет "красный".Нам не нужно было специально запрашивать цикл - он просто делает это неявно.Но предположим, что «красный» был слишком прост, и мы хотели взаимодействовать с каждым элементом индивидуально - мы можем сделать это, передав функцию в качестве второго аргумента: 

$("ul li").css("color", function( index, value ){
  alert( "We're inside LI number " + index );
  return this.innerHTML;
});

Нашей функции будет передано два аргументаby jQuery: индекс для текущего элемента и текущее значение rgb цвета для этого элемента.Вы можете использовать любой из них для внутренней логики - я просто возвращаю innerHTML из li.То, что мы вернем, станет новым значением для color для этого элемента.

Так что, если наш неупорядоченный список будет выглядеть так: 

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

После того, как неявный цикл jQuery завершится, первый li будет красным, второй будет зеленым, а последний синим. 

<ul>
  <li style="color:Red">Red</li>
  <li style="color:Green">Green</li>
  <li style="color:Blue">Blue</li>
</ul>

Вы можете увидеть это онлайн на http://jsbin.com/egihun/2/edit

В зависимости от того, какой метод вы вызываетеразличные аргументы будут переданы вашей функции.Обязательно изучите документацию, чтобы узнать, какая информация доступна вам во время этих неявных циклов.

4 голосов
/ 18 июня 2011 
$('ul li').each(function() {
    alert('this will alert for every li found.');
});
...