循环遍历 div 的所有子项

Question

我正忙于一个将从数据库中加载一些信息的页面，但要做到这一点，我首先必须声明一些东西。 但是我需要访问 html object 中的所有元素。 所以如果我的 HTML 代码是这样的：

    <div class="container">
        <div class="parent1">
            <div class="child1ofparent1"></div>
            <div class="child2ofparent1"></div>
            <div class="child3ofparent1"></div>
        </div>
        <div class="parent2">
            <div class="child1ofparent2"></div>
            <div class="child2ofparent2"></div>
            <div class="child3ofparent2"></div>
        </div>
        <div class="parent3">
            <div class="child1ofparent3"></div>
            <div class="child2ofparent3"></div>
            <div class="child3ofparent3"></div>
        </div>
    </div>

我想通过调用$(".container");来遍历所有孩子。

我现在这样做的方式只是循环遍历所有硬编码的内容，但是由于我的学校将使用该应用程序，因此有些事情需要更加灵活。

我已经尝试过了：

$(".container > *").each(function(i, element) {
       console.log(element);
    });

但这只会返回第一个孩子（.parent1、.parent2、.parent3）。

Answer 1

您正在使用子组合器 - ".container > *" 。 改用后代组合器 - ".container *" 。

 $(".container *").each(function(i, element) { console.log(element); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="parent1"> <div class="child1ofparent1"></div> <div class="child2ofparent1"></div> <div class="child3ofparent1"></div> </div> <div class="parent2"> <div class="child1ofparent2"></div> <div class="child2ofparent2"></div> <div class="child3ofparent2"></div> </div> <div class="parent3"> <div class="child1ofparent3"></div> <div class="child2ofparent3"></div> <div class="child3ofparent3"></div> </div> </div>

Answer 2

虽然其他答案是正确的，但如果可能，应该不鼓励使用通用选择器 ( * )，因为它匹配任何元素，而不仅仅是您要查找的元素，这取决于您的DOM树，可能会对你的表现。 您可以使用如下所示的属性选择器：

 $(function () { var $output = $('#output'); $('.container [class^="child"]').each(function () { var $this = $(this); $('<li />', { text: $this.prop('nodeName') + " w/ class " + $this.attr('class') }).appendTo($output); }); });

 h1 { font-family: Arial, sans-serif; font-size: 16; } #output { list-style-type: square; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="parent1"> <div class="child1ofparent1"></div> <div class="child2ofparent1"></div> <div class="child3ofparent1"></div> </div> <div class="parent2"> <div class="child1ofparent2"></div> <div class="child2ofparent2"></div> <div class="child3ofparent2"></div> </div> <div class="parent3"> <div class="child1ofparent3"></div> <div class="child2ofparent3"></div> <div class="child3ofparent3"></div> </div> </div> <h1>Selected Elements:</h1> <ul id="output"></ul>

参考：属性以选择器开头[name^=”value”]

Answer 3

这将返回所有以.container作为祖先的孩子

    $("*", ".container").each(function(i, element) {
       console.log(element);
    });

Answer 4

你很亲密。 ".container > *"意味着只寻找孩子，而不是所有的后代。

删除>符号以循环后代。

 $(".container *").each(function(i, element) { console.log(element.classList[0]); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="parent1"> <div class="child1ofparent1"></div> <div class="child2ofparent1"></div> <div class="child3ofparent1"></div> </div> <div class="parent2"> <div class="child1ofparent2"></div> <div class="child2ofparent2"></div> <div class="child3ofparent2"></div> </div> <div class="parent3"> <div class="child1ofparent3"></div> <div class="child2ofparent3"></div> <div class="child3ofparent3"></div> </div> </div>

Answer 5

我自己的建议。 使用 div 来确定您想要的嵌套级别。

供第一父母使用

 $(".container > div").each(function(i, element) { console.log(element); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="parent1"> <div class="child1ofparent1"></div> <div class="child2ofparent1"></div> <div class="child3ofparent1"></div> </div> <div class="parent2"> <div class="child1ofparent2"></div> <div class="child2ofparent2"></div> <div class="child3ofparent2"></div> </div> <div class="parent3"> <div class="child1ofparent3"></div> <div class="child2ofparent3"></div> <div class="child3ofparent3"></div> </div> </div>

仅限有父母使用的儿童

 $(".container div div").each(function(i, element) { console.log(element); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="parent1"> <div class="child1ofparent1"></div> <div class="child2ofparent1"></div> <div class="child3ofparent1"></div> </div> <div class="parent2"> <div class="child1ofparent2"></div> <div class="child2ofparent2"></div> <div class="child3ofparent2"></div> </div> <div class="parent3"> <div class="child1ofparent3"></div> <div class="child2ofparent3"></div> <div class="child3ofparent3"></div> </div> </div>

对于所有孩子：父母和孩子使用

 $(".container div").each(function(i, element) { console.log(element); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="parent1"> <div class="child1ofparent1"></div> <div class="child2ofparent1"></div> <div class="child3ofparent1"></div> </div> <div class="parent2"> <div class="child1ofparent2"></div> <div class="child2ofparent2"></div> <div class="child3ofparent2"></div> </div> <div class="parent3"> <div class="child1ofparent3"></div> <div class="child2ofparent3"></div> <div class="child3ofparent3"></div> </div> </div>