jQuery之美——显式遍历

在前两篇文章中介绍了jQuery的链式语法和隐式遍历，还没有介绍一个jQuery的具体方法，下面给大家介绍一个jQuery实用的显式遍历方法：

$(select).each(function(index, element))

方法描述：$(select).each()方法的功能是遍历一个jQuery对象，为每个匹配元素执行一个函数，这个回调函数有两个参数 index,element。index为当前序号(从0开始)，element为DOM对象(为js的原生DOM对象，并非jQuery对象)。

下面的例子对上述方法做一个简单而用实用的演示：

如：当前需求如下，对 <li> 元素序号为偶数的元素为红色字，序号为奇数的元素为蓝色字

<!-- html -->
<ul>
    <li>web</li>
    <li>前端</li>
    <li>梦之蓝</li>
    <li>web-7258</li>
    <li>敬请关注</li>
</ul>
<!-- js -->
$("li").each(function (index,el) {
    if(index%2==0){
        $(el).css("color","#f00");
    }else {
        $(el).css("color","#00f");
    }
});

特别提醒：上面的js代码中 el 参数是一个js原生的DOM对象，如果要使用jQuery的方法，得首先转为jQuery对象，所以上写的是 $(el) ，如果你的代码在使用该方法时并不需要用到 index 序号来做任何事情，那么可以不带任何参数直接使用 $(this) 拿到当前对象即可直接使用jQuery方法。

上面的例子实现一个简单的功能，如果有做过表单美化的经历，做复选框美化是经常的。每点击个复选框都要将这一组复选框的样式进行已勾选和未勾选的样式切换，那么本文章所介绍的方法就能很好的处理这类需求问题。（如果不考虑浏览器兼容问题，则可以通过CSS3匹配器去实现该效果。）

可能有的人会认为，我通过传统的方式循环，一样可以实现该效果，介绍这个方法有意义吗？对于这类的疑问，我只会觉得那是你对jQuery了解的太少，没能真正的发挥jQuery的作用！这样写不仅实现了功能，并且充分运用了jQuery的作用。如果你是一个代码控，你肯定不会介意你的代码全部都是jQuery的语法，起码整体上是会更加美观的。

下篇预告：jQuery之美——数据缓存

更多精彩文章，敬请持续关注——WEB前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦！

jQuery之美——显式遍历

猜你喜欢