导航:
1,jQuery对象(实例)的each()函数
一:jQuery对象(实例)的each()函数
each()
函数用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数。
所谓的上下文,意即该函数内部的this
指针引用了该元素。
该函数属于jQuery
对象(实例)。请注意,这与全局jQuery对象的each()函数不同。
语法
jQueryObject.each( callback )
参数
参数 | 描述 |
---|---|
callback | Function类型指定的用于循环执行的函数。 |
each()
函数将根据匹配到的每一个元素循环调用函数callback
。每次调用函数callback
时,each()
函数都会将callback
函数内部的this
引用指向当前正在迭代的元素,并为其传入两个参数。第一个参数是当前迭代元素在匹配到的元素中的索引值(从0开始计数),第二个参数是当前迭代元素(与this
的引用相同)。
each()
函数还会根据每次调用函数callback
的返回值来决定后续动作。如果返回值为false
,则停止循环(相当于普通循环中的break
);如果返回其他任何值,均表示继续执行下一个循环。
返回值
each()
方法的返回值为jQuery类型,返回当前jQuery对象本身。
示例&说明
以下面这段HTML代码为例:
<div id="n1">
<div id="n2">
<ul id="n3">
<li id="n4">item1</li>
<li id="n5">item2</li>
<li id="n6">item3</li>
</ul>
</div>
</div>
<form id="demoForm">
<input name="goods_weight" type="checkbox" value="20">A(20kg)<br>
<input name="goods_weight" type="checkbox" value="33">B(33kg)<br>
<input name="goods_weight" type="checkbox" value="36">C(36kg)<br>
<input name="goods_weight" type="checkbox" value="49">D(49kg)<br>
<input name="goods_weight" type="checkbox" value="56">E(56kg)<br>
<input name="goods_weight" type="checkbox" value="78">F(78kg)<br>
<input id="btnBuy" type="button" value="订购">
</form>
现在,我们将所有的<li>元素的innerHTML改为"编号n"(n为1、2、3……)。
$("ul li").each(function(index, element){
// this === element
$(element).html( "编号" + (index + 1) );
});
接着,我们注册【订购】按钮的点击事件,用于处理商品订购事务,要求每次订购的商品重量不得超过100kg,否则无法订购并提示相应信息。
$("#btnBuy").click(function(){
var weight = 0;
$("[name=goods_weight]:checked").each(function(){
weight += parseInt(this.value);
if(weight > 100){ // 重量超标,停止循环
return false;
}
});
if(weight <= 0){
alert("没有选择任何商品!");
}else if(weight > 100){
alert("一次订购的商品重量不能超过100kg!");
}else{
// 订购商品
alert("订购商品成功!");
}
});
二:全局jQuery对象的each()函数,$.each()【又叫jQuery.each()】
jQuery.each()
函数用于遍历指定的对象和数组,并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。
所谓的上下文,意即该函数内部的this
指针引用了该元素。
该函数属于全局jQuery
对象。请注意,这与jQuery对象(实例)的each()函数不同。
语法
静态函数jQuery.each()
的语法如下:
jQuery.each( object, callback )
参数
参数 | 描述 |
---|---|
object | Object类型指定需要遍历的对象或数组。 |
callback | Function类型指定的用于循环执行的函数。 |
参数object
可以是对象或数组。如果是对象,则遍历该对象的每个属性;如果是数组,则遍历该数组中的每个元素。
jQuery.each()
函数将根据每个成员(对象的属性或数组的元素)循环调用函数callback
。每次调用函数callback
时,jQuery.each()
函数都会将callback
函数内部的this
引用指向当前正在迭代的成员,并为其传入两个参数。第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数),第二个参数是当前迭代成员(与this
的引用相同)。
jQuery.each()
函数还会根据每次调用函数callback
的返回值来决定后续动作。如果返回值为false
,则停止循环(相当于普通循环中的break
);如果返回其他任何值,均表示继续执行下一个循环。
返回值
jQuery.each()
方法的返回值为jQuery类型,返回当前jQuery对象本身。
示例&说明
使用jQuery.each()函数迭代对象或数组,jQuery示例代码如下:
// 遍历数组元素
$.each( [1, 2, 3] , function(i, item){
alert("索引=" + i + "; 元素=" + item);
} );
// 遍历对象属性
$.each( { name: "张三", age: 18 } , function(property, value){
alert("属性名=" + property + "; 属性值=" + value);
} );
var array = [];
array[2] = "Code";
array[4] = "Player";
// 会遍历索引为0、1、2、3、4的元素,其中0、1、3的元素是undefined
$.each( array , function(i, item){
alert("索引=" + i + "; 元素=" + item);
} );
jQuery.each()函数同样可以遍历jQuery对象中匹配的元素,以下面这段HTML代码为例:
<div id="n1">
<div id="n2">
<ul id="n3">
<li id="n4">item1</li>
<li id="n5">item2</li>
<li id="n6">item3</li>
</ul>
</div>
</div>
<form id="demoForm">
<input name="goods_weight" type="checkbox" value="20">A(20kg)<br>
<input name="goods_weight" type="checkbox" value="33">B(33kg)<br>
<input name="goods_weight" type="checkbox" value="36">C(36kg)<br>
<input name="goods_weight" type="checkbox" value="49">D(49kg)<br>
<input name="goods_weight" type="checkbox" value="56">E(56kg)<br>
<input name="goods_weight" type="checkbox" value="78">F(78kg)<br>
<input id="btnBuy" type="button" value="订购">
</form>
现在,我们将所有的<li>元素的innerHTML改为"编号n"(n为1、2、3……)。
$.each( $("ul li"), function(index, element){
// this === element
$(element).html( "编号" + (index + 1) );
});
接着,我们注册【订购】按钮的点击事件,用于处理商品订购事务,要求每次订购的商品重量不得超过100kg,否则无法订购并提示相应信息。
$("#btn").click(function(){
var weight = 0;
$.each( $("[name=goods_weight]:checked"), function(){
weight += parseInt(this.value);
if(weight > 100){
return false;
}
});
if(weight <= 0){
alert("没有选择任何商品!");
}else if(weight > 100){
alert("一次订购的商品重量不能超过100kg!");
}else{
// 订购商品
alert("订购商品成功!");
}
});