循环遍历 div 的所有子元素

Question

我正忙于一个将从数据库加载一些信息的页面，但要做到这一点，我首先必须声明一些东西。但我需要访问 html 对象中的所有元素。所以如果我的 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

您正在使用child combinator - ".container > *"。请改用descendant combinator - ".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>

参考：Attribute Starts With Selector [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>