如何用jQuery来迭代一个div的子元素
jQuery选择器可以用来寻找(选择)DOM中的HTML元素。一旦一个元素被选中,jQuery children()方法被调用,以找到所有被选中的元素的子元素。为了循环浏览子元素,jQuery的each()方法被使用,如下面的例子所示。
示例1:示例HTML页面包含一个有一些子元素的 div “container “。在 div “container “的所有子元素中进行循环,然后将它们复制到最初没有子元素的 div”output-container “。
<!DOCTYPE html>
<html>
<head>
<!-- Including the jQuery
library's script -->
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: #008000">
GeeksforGeeks
</h1>
<hr>
<u>This is the "#container" div</u>
<div id="container">
<div>
Child
<div>
Grandchild
</div>
</div>
</div>
<u>This is the "#output-container" div</u>
<div id="output-container"></div>
<script>
// loop through the child elements
// of the "#container" div
("#container").children()
.each(function () {
// "this" is the current child
// in the loop grabbing this
// element in the form of string
// and appending it to the
// "#output-container" div
var element =(this)
.prop('outerHTML');
$("#output-container")
.append(element);
});
</script>
</body>
</html>
输出:
例子2:在上面的例子中,循环是通过所有的子元素实现的。但如果需要循环某些特定的子元素或具有某些特定类别或ID的元素,那么它将作为一个参数传递给children()函数,如下所示。
<!DOCTYPE html>
<html>
<head>
<!-- Including the jQuery
library's script -->
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
</head>
<body>
<h1 style="color: #008000">
GeeksforGeeks
</h1>
<hr>
<h3>This is the "#container" div</h3>
<div id="container">
<em>Lorem Ipsum</em><br>
<strong id="name">
Lorem Ipsum
</strong><br>
<u class="uname">Lorem Ipsum</u>
</div>
<br>
<h3>Selecting the 'em' element</h3>
<div id="em-container"></div>
<h3>
Selecting the element
with id "name"
</h3>
<div id="name-container"></div>
<h3>
Selecting the element
with class "uname"
</h3>
<div id="uname-container"></div>
<script>
// looping over the child 'em'
// elements of the "#container" div
("#container").children('em').each(function()
{
var element =(this).prop('outerHTML');
("#em-container").append(element);
});
// looping over the child elements of
// the "#container" div having id as "name"
("#container").children('#name').each(function()
{
var element = (this).prop('outerHTML');
("#name-container").append(element);
});
// looping over the child elements of
// the "#container" div having class as "uname"
("#container").children('.uname').each(function()
{
var element =(this).prop('outerHTML');
$("#uname-container").append(element);
});
</script>
</body>
</html>
输出:
上面的例子演示了所有三种情况,在特定的子元素上循环,在具有特定id的子元素上循环,以及在具有特定类的子元素上循环。
jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。