您的位置：首页 > Web前端 > JQuery

jquery对象的遍历(显示遍历、隐式遍历)

2016-12-06 23:34 363 查看

既然jquery对象是个数组，那么就可以通过遍历来操作。示例如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>jquery对象</title>
<style type="text/css">
span {
width: 100px;
height: 100px;
background-color: yellow;
display: inline-block;
}
</style>
<script src="js/jquery-1.4.2.js"></script>
</head>

<body>
<span>span1</span>
<span>span2</span>
<br />
<input type="button" value="点击弹出各span的文本 " id="b1" />
</body>

</html>

需求：点击b1按钮时，弹出各个span的文本。

我们可以通过$("span")来得到所有的span，遍历此jquery对象即可。

方法1：

显示遍历：

<script>
$(function() {
$("#b1").click(function() {
var $spans = $("span");
for(var i = 0; i < $spans.length; i++) {
alert($spans[i].innerHTML);
}
})
})
</script>

这个方法用jquery对象的length属性来得到dom对象的个数，然后根据索引依次拿到每个dom，进而操作。

方法2：

隐式遍历：

<script>
$(function() {
$("#b1").click(function() {
$("span").each(function(index, dom) {
alert($(dom).text());
})
})
})
</script>

jquery对象的隐式遍历其实就是利用jquery对象的each()方法，方法需要传一个函数，此函数有两个参数，第一个参数是索引(从0开始)，第二个参数是对应索引的dom对象，我们只需在函数体中操作这两个参数就可以达到我们想要的目的。

jquery对象的text()方法或者html()方法可以设置、获取span/div的内容，对应dom对象的innerHTML。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航