如何用jQuery来迭代一个div的子元素

如何用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>

输出:
如何用jQuery来迭代一个div的子元素?

例子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>

输出:
如何用jQuery来迭代一个div的子元素?

上面的例子演示了所有三种情况,在特定的子元素上循环,在具有特定id的子元素上循环,以及在具有特定类的子元素上循环。

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程