如何选择最接近的所有元素

Question

这是html内容，我无法改变：

<button class="out">out</button>
<div class="in">in1</div>
<div class="in">in2</div>
<div class="in">in3</div>


<button class="out">out</button>
<div class="in">in1</div>
<div class="in">in2</div>
<div class="in">in3</div>
<div class="in">in4</div>
<div class="in">in5</div>


<button class="out">out</button>
<div class="in">in1</div>
<div class="in">in2</div>
<div class="in">in3</div>
<div class="in">in4</div>

所以我应该点击out按钮，然后隐藏其内容＆＃34;以下＆＃34;

但他们是同一个班级，我不知道如何分别选择他们。

这是小提琴：FIDDLE

Answer 1

尝试在此上下文中使用.nextUntil()，

$('.out').click(function(){
  $(this).nextUntil('.out').hide();
});

DEMO

以下演示将指导您如何切换这些元素，

DEMO I