jQuery为找到的每个元素运行代码

Question

我有一个列表,并使用jQuery来获取列表中的每个LI:

$('ul li')

我如何得到它,以便在找到每个元素后运行代码,但不是事件; 像这样:

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

对我来说这是最好的方法吗？

Answer 1

jQuery中有两种类型的循环:显式和隐式.

显式循环

显式循环是您显式调用的循环.如果您有一个要循环的值数组,则可以使用以下$.each()方法:

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

然后,jQuery将循环遍历数组中的每个值,然后运行匿名函数.它会将两个值传递给此函数:它所触摸的值的当前索引以及值本身.因此,如果我们在第一次运行时,index将为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已经自己执行了一个循环.这个循环称为隐式循环,有时我们可以使用它来完成我们的需求,同时提高性能.

隐式循环在jQuery本身内自动完成,例如使用您的代码:

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

jQuery对所有匹配的li元素执行循环,并将其颜色设置为"红色".我们没有特别要求一个循环 - 它只是隐含地做一个.但是假设"red"太简单了,我们希望单独与每个项目进行交互 - 我们可以通过传入一个函数作为第二个参数来实现:

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

我们的函数将通过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>

根据您调用的方法,将向您的函数传递不同的参数.请务必研究文档,以了解在这些隐式循环期间您可以获得哪些信息.

Answer 2

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