上一篇
jquery遍历dom
在jQuery中，遍历div元素的方法有很多种，这里我将详细介绍几种常用的方法。
1、使用each()方法遍历div元素
each()方法是jQuery中最常用的遍历方法之一，它可以遍历匹配到的DOM元素集合，并对每个元素执行指定的操作，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script>
$(document).ready(function(){
$(".box").each(function(index, element){
console.log("Index: " + index + ", Element: " + $(element).text());
});
});
</script>
</body>
</html>
在这个示例中，我们首先引入了jQuery库，然后使用$(".box")选择器选中了所有class为"box"的div元素，接着，我们使用each()方法遍历这些元素，并打印出它们的索引和文本内容。
2、使用for循环遍历div元素
除了each()方法外，我们还可以使用for循环来遍历div元素，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script>
$(document).ready(function(){
var boxes = $(".box");
for (var i = 0; i < boxes.length; i++) {
console.log("Index: " + i + ", Element: " + $(boxes[i]).text());
}
});
</script>
</body>
</html>
在这个示例中，我们同样首先引入了jQuery库，然后使用$(".box")选择器选中了所有class为"box"的div元素，接着，我们使用for循环遍历这些元素，并打印出它们的索引和文本内容，需要注意的是，我们需要使用$(boxes[i])来获取当前遍历到的元素。
3、使用map()方法遍历div元素
map()方法是jQuery中的一个高级遍历方法，它可以将匹配到的DOM元素集合转换为一个数组，并对数组中的每个元素执行指定的操作，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script>
$(document).ready(function(){
var boxes = $(".box");
var boxTexts = boxes.map(function(){ return $(this).text(); }).get();
console.log(boxTexts); // ["Box 1", "Box 2", "Box 3"]
});
</script>
</body>
</html>
在这个示例中，我们同样首先引入了jQuery库，然后使用$(".box")选择器选中了所有class为"box"的div元素，接着，我们使用map()方法将这些元素转换为一个包含它们文本内容的数组，并打印出这个数组，需要注意的是，我们需要使用get()方法来获取转换后的数组。
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/288290.html
