遍历 div 的所有 children

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");

遍历所有 children

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

我已经试过了：

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

但这只是returns第一个children (.parent1, .parent2, .parent3).

Answer 1

这将 return 以 .container 作为祖先的所有 children

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

Answer 2

您正在使用 child combinator - ".container > *". Use the 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 3

虽然其他答案是正确的，但如果可能的话，应该不鼓励使用通用选择器 (*)，因为它匹配任何元素，而不仅仅是您要查找的元素，具体取决于您的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 4

你很接近。 ".container > *"表示只查找children，不查找所有后代。

删除 > 符号以遍历后代。

$(".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 确定所需的嵌套级别。

第一次parent使用

$(".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>

仅供 children 与 parent 使用

$(".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>

对于所有 children：parent 和 child 使用

$(".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>

遍历 div 的所有 children

Loop through all children of an div

javascript

jquery

loops

parent

children