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>