指定ボタンに対応するdivを選択するにはどうすればいいですか？

Question

ここには5つのボタンと5つのdivがあります。私が最初のボタンをクリックすると、いくつかのデータは最初のdivにのみ書き込まれ、他のデータには書き込まれません。同じことが連続したボタンにも当てはまります。私はjQueryでこれをやっています。

$(document).ready(function() { 
    $(".btn").each(function() { 
     // code here to put some data in relative div 
    }); 
}); 

<button type="button" class="btn">Button 1</button> 
<button type="button" class="btn">Button 2</button> 
<button type="button" class="btn">Button 3</button> 
<button type="button" class="btn">Button 4</button> 
<button type="button" class="btn">Button 5</button> 

<div class="myDiv"></div> 
<div class="myDiv"></div> 
<div class="myDiv"></div> 
<div class="myDiv"></div> 
<div class="myDiv"></div> 

Answer 1

まずあなたはボタンがクリックされたときにこの現象が発生する場合はclick()方法、ないeach()を使用する必要があることに注意してください。

index()メソッドを使用すると、クリックしたボタンのインデックスを見つけて、eq()メソッドを使用して、そのインデックスを関連する.myDivに関連付けることができます。これを試してみてください：

$(".btn").click(function() { 
 
    var index = $(this).index('button'); 
 
    $('.myDiv').eq(index).text('clicked button ' + (index + 1)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn">Button 1</button> 
 
<button type="button" class="btn">Button 2</button> 
 
<button type="button" class="btn">Button 3</button> 
 
<button type="button" class="btn">Button 4</button> 
 
<button type="button" class="btn">Button 5</button> 
 

 
<div class="myDiv"></div> 
 
<div class="myDiv"></div> 
 
<div class="myDiv"></div> 
 
<div class="myDiv"></div> 
 
<div class="myDiv"></div>