jquery - クリックしたボタンに最も近いクラスを選択

Question

button1をクリックしたときに、クラス「divtoexpand」で最も近いdivを展開したい。

どうすればこれを達成できますか？

HTML：

<div class="test">
    <div class="menu">
        <div class="button1"></div>
    </div>
</div>
<div class="divtoexpand"></div>

<div class="test">
    <div class="menu">
        <div class="button1"></div>
    </div>
</div>
<div class="divtoexpand"></div>

Answer 1

$('.button1').on('click', function() {
  $(this).closest('div.test').next('div.divtoexpand').slideDown();
});

デモ

Answer 2

まず、ボタンにIDを付けます。次に、ボタンがクリックされたときに表示を行うことができます。

 <div class="test">
     <div class="menu">
         <div class="button1" id="foo"></div>
     </div>
 </div>
 <div class="divtoexpand" id="bar"></div>

 <script>
   $("#foo").click(function(){
     $("#bar").show()   
   });  
 </script>

Answer 3

より一般的なアプローチが必要な場合は、次の方法を試すことができます。

$('.button1').on('click', function() {
  $(this).parents().next('.divtoexpand').slideDown();
})

デモ