jQuery.each()用法分享

 更新时间:2012年07月31日 21:48:25   作者:  
昨天写了个小插件,用到这个方法,不太明白$.each()这个方法,今天查了下手册,学习一下
例遍数组,同时使用元素索引和内容。(i是索引,n是内容)
复制代码 代码如下:

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});

例遍对象,同时使用成员名称和变量内容。(i是成员名称,n是变量内容)
复制代码 代码如下:

$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});

例遍dom元素,此处以一个input表单元素作为例子。

如果你dom中有一段这样的代码
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>
然后你使用each如下
复制代码 代码如下:

$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement],因为它是一个表单元素。
alert(i); //输出索引为0,1,2,3
alert(val.name); //输出name的值
alert(val.value); //输出value的值
});

以下是官方的解释:

jQuery.each(object, [callback])

概述
通用例遍方法,可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

参数
objectObject
需要例遍的对象或数组。

callback (可选)Function
每个成员/元素执行的回调函数。

相关文章

  • jQuery使用children()找到特定元素的子元素

    jQuery使用children()找到特定元素的子元素

    children()是jQuery中的内置方法,用于查找与所选元素相关的所有子元素, jQuery中的children()方法向下遍历到所选元素的单个级别并返回所有元素,我们还可以在children()的参数中添加过滤器、使用children()来定位特定的子元素以及使用each()方法来迭代子元素等
    2023-11-11
  • 关于jQuery里prev()的简单操作代码

    关于jQuery里prev()的简单操作代码

    这篇文章主要介绍了jQuery里prev()的简单操作代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-10-10
  • jquery.ajax的url中传递中文乱码问题的解决方法

    jquery.ajax的url中传递中文乱码问题的解决方法

    本篇文章主要是对jquery.ajax的url中传递中文乱码问题的解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jQuery实现的仿百度分页足迹效果代码

    jQuery实现的仿百度分页足迹效果代码

    这篇文章主要介绍了jQuery实现的仿百度分页足迹效果代码,采用jQuery针对奇偶数不同的页码设置不同的样式,非常简单实用,需要的朋友可以参考下
    2015-10-10
  • jquery中ajax学习笔记3

    jquery中ajax学习笔记3

    由于很多知识都已经做了详细介绍,本节只介绍需要修改的代码,使用jqery封装的ajax使用XML格式接收服务器端的数据,web.xml、后台的servet都不用改
    2011-10-10
  • jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

    jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

    这篇文章主要介绍了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法,结合实例形式总结分析了jQuery节点操作的相关技巧,需要的朋友可以参考下
    2016-04-04
  • jquery实现点击左右按钮切换图片

    jquery实现点击左右按钮切换图片

    这篇文章主要为大家详细介绍了jquery实现点击左右按钮切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • BootStrap table表格插件自适应固定表头(超好用)

    BootStrap table表格插件自适应固定表头(超好用)

    这篇文章主要介绍了BootStrap table表格插件自适应固定表头(超好用)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • jQuery实现的卷帘门滑入滑出效果【案例】

    jQuery实现的卷帘门滑入滑出效果【案例】

    这篇文章主要介绍了jQuery实现的卷帘门滑入滑出效果,结合具体实例形式分析了jQuery事件绑定及slideToggle方法实现滑入滑出效果相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 解决IE7中使用jQuery动态操作name问题

    解决IE7中使用jQuery动态操作name问题

    IE7中无法使用Jquery动态操作页面元素的name属性,怎么解决这个问题呢?下面小编给大家带来了解决IE7中使用jQuery动态操作name问题,需要的朋友参考下吧
    2017-08-08

最新评论