Question

我具有以下HTML结构：

<div class="parent">
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
</div>
<div class="parent">
    <div class="child">
    </div>
    <div class="child">
    </div>
</div>
<div class="parent">
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
</div>

我的问题是，在父母的each()循环中，我该如何循环该特定父母的孩子？这是我到目前为止拥有的（无效）代码。

var parents = $('div.parent');
var children = $('div.child');

$(parents).each(function(index, value) {
    // do something
    $(children, parents + index).each(function() {
        //do something else
    });
});

我想选择的另一种方法是在第一个each()中设置子变量，但是我不确定该怎么做。

Answer 1

问题的部分原因是您正在div.child变量中全局选择children，部分原因是您试图用jQuery对象附加整数值（index）（parents），将无法使用。

要实现所需的功能，您需要在循环中获取当前children()元素的.parent，这可以通过使用this关键字来实现。试试这个：

var $parents = $('div.parent');

$parents.each(function() {
  $(this).children().each(function() {
    console.log($(this).text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">A-1</div>
  <div class="child">A-2</div>
  <div class="child">A-3</div>
</div>
<div class="parent">
  <div class="child">B-1</div>
  <div class="child">B-2</div>
</div>
<div class="parent">
  <div class="child">B-1</div>
  <div class="child">B-2</div>
  <div class="child">B-3</div>
  <div class="child">B-4</div>
</div>

使用each（）遍历特定父母的孩子

1 个答案: