jquery - 如何不断迭代 div 直到到达具有特定类的 div

Question

所以我的 html 看起来像这样:

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

....

基本上我想要做的是，当单击 .parent 时，将 display: none 切换到 之间的所有 .child单击 .parent，然后单击下一个 .parent。假设我单击第一个 .parent，我想将 display: none 切换到两个父级之间的 4 个 .childs。我该如何在 jQuery 中做到这一点？

Answer 1

您可以使用.nextUntil() method为了选择兄弟元素直到下一个.parent元素:

$('.parent').on('click', function () {
  $(this).nextUntil('.parent').toggle();
});

这是一个基本示例:

$('.parent').on('click', function() {
  $(this).nextUntil('.parent').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">parent</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="parent">parent</div>
<div class="child">child</div>
<div class="child">child</div>