博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery中的each方法
阅读量:5846 次
发布时间:2019-06-18

本文共 2963 字,大约阅读时间需要 9 分钟。

.each( function(index, Element) )

描述: 遍历一个jQuery对象,为每个匹配元素执行一个函数。

  • 添加的版本: .each( function(index, Element) )

    • function(index, Element)
      类型:  ()
      为每个匹配元素执行的一个函数。
    • 其中的Element是一个JS对象

.each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。更重要的是,回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。

假设页面上有这样一个简单的无序列表。

1
2
3
4
<ul>
<li>foo</li>
<li>bar</li>
</ul>

你可以选中并迭代这些列表:

1
2
3
$( "li" ).each(function( index ) {
console.log( index + ": "" + $(this).text() );
});

列表中每一项会显示在下面的消息中:

0: foo 

1: bar

我们可以通过返回 false以便在回调函数内中止循环。

注意: jQuery的方法,返回一个jQuery对象遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的.each()方法:

1
2
3
4
5
6
7
// The .each() method is unnecessary here:
$( "li" ).each(function() {
$(this).addClass( "foo" );
});
 
// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );

例子:

Example: 遍历三个div并设置它们的color属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; text-align:center; cursor:pointer;
font-weight:bolder; width:300px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
<script>
$(document.body).click(function () {
$( "div" ).each(function (i) {
if ( this.style.color != "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
</script>
 
</body>
</html>

Demo:

 

Example: 如果你不想要普通的DOM元素,而想获得的是jQuery对象的话,使用$(this)函数。例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<style>
ul { font-size:18px; margin:0; }
span { color:blue; text-decoration:underline; cursor:pointer; }
.example { font-style:italic; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
To do list: <span>(click here to change)</span>
<ul>
<li>Eat</li>
<li>Sleep</li>
 
<li>Be merry</li>
</ul>
<script>
$( "span" ).click(function () {
$( "li" ).each(function(){
$( this ).toggleClass( "example" );
});
});
 
</script>
 
</body>
</html>

Demo:

 

Example: 你可以使用 'return' 来提前结束 each() 循环。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<style>
div { width:40px; height:40px; margin:5px; float:left;
border:2px blue solid; text-align:center; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
 
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
 
<div></div>
<div></div>
<script>
$( "button" ).click(function () {
$( "div" ).each(function ( index, domEle) {
// domEle == this
$( domEle ).css( "backgroundColor", "yellow" );
if ( $(this).is( "#stop" ) ) {
$( "span" ).text( "Stopped at div index #" + index );
return false;
}
});
});
 
</script>
 
</body>
</html>

 

转载于:https://www.cnblogs.com/powerplay/p/8069300.html

你可能感兴趣的文章
在51CTO三年年+了,你也来晒晒
查看>>
js控制图片等比例缩放
查看>>
Openstack API常用命令
查看>>
关于k-means聚类算法的matlab实现
查看>>
跟随我在oracle学习php(8)
查看>>
UVA-10212 The Last Non-zero Digit. 分解质因子+容斥定理
查看>>
Kotlin的语法糖(一)基础篇
查看>>
亚信安全参加第六届全国等保技术大会 态势感知助力“等保2.0”落地
查看>>
大数据公司Palantir融得7亿美元 曾追踪拉登
查看>>
建立备份策略的重要性
查看>>
发力IoT领域 Marvell注重生态系统发展
查看>>
你应该知道的 RPC 原理
查看>>
Ubuntu安装词典
查看>>
Spring解析
查看>>
python中str和repr区别
查看>>
数据挖掘-同比与环比
查看>>
RedHat6 管理应用服务【11】
查看>>
stm32F10x复习-1
查看>>
[转] vue异步处理错误
查看>>
CSS 3D动画概述菜鸟级解读之一
查看>>