首页 > 资讯列表 > 编程/数据库 >> PHP

jQuery中的each函数使用方法

PHP 2014-11-28 10:31:29 转载来源: 网络整理/侵权必删

$.each()和$(selector).each()很相似,前者可用于遍历一个数组或是json对象,而后者是专门用来遍历一个jQuery对象 先来说说$.each()吧,一般是这么用的 $.each(arr, function(i, v){       // do something   })   其中arr也就是集合,也可以是json对象 而回调函数中的i则是数组的下标(在json中则是对应的key) 而v则是arr[i]的值(在json中则是对应的value) 下面来看一个简单的实例: var json = {name:"zhu", age:10}   var arr = ['a','b','c','d&

$.each()和$(selector).each()很相似,前者可用于遍历一个数组或是json对象,而后者是专门用来遍历一个jQuery对象

先来说说$.each()吧,一般是这么用的

$.each(arr, function(i, v){  

    // do something  

})  

其中arr也就是集合,也可以是json对象

而回调函数中的i则是数组的下标(在json中则是对应的key)

而v则是arr[i]的值(在json中则是对应的value)

下面来看一个简单的实例:

var json = {name:"zhu", age:10}  

var arr = ['a','b','c','d']  

  

$.each(arr, function(i, v){  

    alert(i + ":" + v)  

});  

$.each(json, function(k, v){  

    alert(k + ":" + v)  

});  

这样就完成了对数组和json的遍历。

当然了,如此遍历用原生的js也是可以轻松做到的

比如遍历上面的json或是arr,只需要:

for(var k in json){  

    alert(k + ":" + arr[k])  

}  

看起来似乎还是js更简洁一些吧~性能上可能也要好一点

 

下面介绍$(selector).each(),这个方法在js中就不好找到替代品了。

其中$(selector)负责选中一组jQuery元素,而each函数负责遍历它

比如我们想对一组“li”改变其文字颜色

<style>  

.red{  

    color: red;  

}  

</style>  

<ul>  

    <li>Dog</li>  

    <li>Cat</li>  

    <li>Mouse</li>  

</ul>  

<input type="button" id="btn">  

<script>  

    $("#btn").click(function() {  

        $("li").each(function() {  

            $(this).toggleClass('red');  

        });  

    });  

</script>  

不过实际上,jQuery中存在隐式迭代的现象

每当我们调用选择器方法查找dom树里的元素时,其实就是把找到的dom元素存入一个jQuery对象里的dom数组中,然后再把这个jQuery对象返回。

而所谓隐式迭代也就是当我们调用jQuery方法时(如 toggleClass(..)),jQuery方法会遍历内部 dom数组,并调用每个dom元素的对应的dom属性或方法完成操作。

所有click中的函数并不需要使用each,直接$("li").toggleClass('red')也可以

 

在$(seletor).each(..)中,this被绑定到了当前遍历的DOM对象,如需获得jQuery对象$(this)就可以了

值得注意的是,还可以在遍历过程中提前退出遍历,只需要return false就可以了


标签: jQuery 中的 each 函数 使用方法


声明:本文内容来源自网络,文字、图片等素材版权属于原作者,平台转载素材出于传递更多信息,文章内容仅供参考与学习,切勿作为商业目的使用。如果侵害了您的合法权益,请您及时与我们联系,我们会在第一时间进行处理!我们尊重版权,也致力于保护版权,站搜网感谢您的分享!

站长搜索

http://www.adminso.com

Copyright @ 2007~2024 All Rights Reserved.

Powered By 站长搜索

打开手机扫描上面的二维码打开手机版


使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

站长搜索目录系统技术支持