如何继续迭代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();
});

这是一个基本的例子：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;