Как выбрать соответствующий div для данной кнопки?

Question

Здесь у меня есть пять кнопок и пять 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>