Найти родственный Td элемент с JQuery

Question

У меня есть таблица, которая выглядит следующим образом:

<table> 
    <tr> 
    <td class='class1' id='id1'></td> 
    <td class='class2' id='id2'></td> 
    <td class='class3' id='id3'></td> 
    <td class='class4' id='id4'><button id='editButton'></button></td> 
    </tr> 
    <tr> 
    <td class='class1' id='id1'></td> 
    <td class='class2' id='id2'></td> 
    <td class='class3' id='id3'></td> 
    <td class='class4' id='id4'><button id='editButton'></button></td> 
    </tr> 
</table> 

Приведенный ниже код показывает мне id4:

$("#editButton").on("click", function(){ 
    alert($(this).parent().attr("id")); 
}); 

Теперь мне нужно, чтобы достичь id3, который является самым близким один. Функции .next('class3') и .closest('class3') не помогают мне, или я использую их неправильно. Пожалуйста, помогите мне

Answer 1

первый: идентификатор должен быть уникальным

так что ваш код должен нравится

<table> 
    <tr> 
    <td class='class1' id='id1'></td> 
    <td class='class2' id='id2'></td> 
    <td class='class3' id='id3'></td> 
    <td class='class4' id='id4'><button class="editButton"></button></td> 
    </tr> 
    <tr> 
    <td class='class1' id='id5'></td> 
    <td class='class2' id='id6'></td> 
    <td class='class3' id='id7'></td> 
    <td class='class4' id='id8'><button class="editButton"></button></td> 
    </tr> 
</table> 

и в JS

$(".editButton").on("click", function(){ 
    alert($(this).closest('tr').find('td:nth-child(3)').attr("id")); 
});