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

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

$('ul li')

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

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

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

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对象上循环.每次迭代都会在您的匿名函数中公开当前元素.所以重新审视我们之前的例子,我们可以做到以下几点：

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

因此,对于匹配的每个元素,我们将执行我们的匿名函数. jQuery将向我们传递一个索引,以便我们可以通过匹配的元素跟踪我们的进度.在第一次运行时,这将引用#a.在第二次通过时,index将为1,这将引用#b.

虽然显式循环很诱人,但请注意它们可能会给应用程序增加不必要的开销.当jQuery有多个匹配的元素时,jQuery已经自己执行了一个循环.这个循环称为隐式循环,有时我们可以使用它来满足我们的需求,同时提高性能.

隐含循环

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

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

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

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

我们的函数将通过jQuery传递两个参数：当前元素的索引,以及该元素上颜色的当前rgb值.您可以使用其中任何一个作为内部逻辑 – 我只是返回li的innerHTML.我们返回的内容将成为此元素的新颜色值.

所以如果我们的无序列表看起来像这样：

<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>

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

猜你在找的jQuery相关文章