好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

jQuery.each方法详解

jQuery.each方法是一个通用迭代器函数,用以方便的遍历数组和对象。

迭代的指标分为数字型和字符串型,数字型的指标为0到length-1,字符串型的指标为属性名称。

定义一:数组型

jQuery.each(array,callback)

参数解析:

array:将要迭代的数组

callback:对数组每个元素所执行的回调函数

function(Integer indexInArray, Object value)

each可以遍历数组并传递两个参数给callback回调函数:Integer indexInArray和Object value,即数组的数字索引和所对应的值。

定义二:对象型

jQuery.each(object,callback)

参数解析:

object:将要遍历的对象

callback:对数组每个元素所执行的回调函数

function(String propertyName, Object valueOfProperty)

each可以遍历数组并传递两个参数给callback回调函数:String propertyName和Object valueOfProperty,即对象的名称索引和所对应的值。

注意:each方法使用length标记遍历次数,因此对象不能存在length属性,否则可能出错。


特别注意:中途停止遍历只能使用return false,return no-false仅仅相当于continue。

例子:

例一:数组型

$.each([ 52, 97 ], function( index, value ) {  
    alert( index + ": " + value );
});

结果:

0: 52 
1: 97

例二:对象型

var obj = {  
    "flammable": "inflammable",  
    "duh": "no duh"
};
$.each(obj, function( key, value ) {  
    alert(key + ": " + value);
});

结果:

flammable: inflammable 
duh: no duh

变形:$(selector).each(callback)

区别:

$(selector).each(callback)仅仅是处理选择的DOM元素对象数组,而jQuery.each()可以处理任意数组和对象。 

定义:

$(selector).each(callback)

参数:

selector:选择器,获取DOM元素对象数组

callback:对数组中每个对象所执行的回调函数

function(Integer indexInArray, Object value)

each函数将$(selector)数组的信息传递给callback函数,两个参数:Integer indexInArray和Object value,即数组的数字索引和所对应的对象。此时,获取对象有两种方法:$(this)和$(value),两者是完全相同的,采用$(this)时,参数传递为回调函数的可选参数,即function(){$(this)...}即可。

实例一:采用this

<html>
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

实例二:显式传递参数

<html>
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(index,value)){
      alert(index+": "+$(value).text());
      // alert(index+": "+$(this).text()); //完全一致
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>


点赞0
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘