Найти родной родительский стол - jquery

Question

У меня есть 2 таблицы, где у меня есть несколько строк с некоторыми кнопками изображения. Я хочу сделать это, когда я нажимаю кнопку изображения, - это SHOW div, который помещен прямо под таблицей, содержащей кнопку щелкнутого изображения.

<table id="Table1"> 
    <tr> 
    <td><input type="image" src="Images/info.jpg" class="infoButton" /></td> 
    </tr> 
</table> 
<div class="info">    
</div> 

<table id="Table2"> 
    <tr> 
    <td><input type="image" src="Images/info.jpg" class="infoButton" /></td> 
    </tr> 
</table> 
<div class="info">    
</div> 

То, что я сделал до сих пор это:

$('.infoButton').click(function() {       
    $(this).closest('table').siblings().filter(":first").show(); 
}); 

Это работает, когда я нажимаю кнопку в 1-й таблицы. Затем он показывает правильный div (тот, который находится в таблице 1). Когда я нажимаю на кнопку внутри таблицы 2, она снова показывает тот же div. Я хочу, чтобы показать DIV под таблицей 2.

Answer 1

$('.infoButton').click(function() {       
    $(this).closest('table').next('div').show(); 
}); 

DEMO

Answer 2

Рекомендует используя parents функции JQuery, она увеличивает читаемость и построила для этой цели.

$('.infoButton').click(function() {
$(this).parents('table').next('div').show(); });