使用jquery查找同级td元素

Find the sibling td element with jquery

本文关键字：td 元素 jquery 查找 使用      更新时间：2023-09-26

我有一个如下所示的表：

<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')对我没有帮助，或者我使用它们的方式不对。请帮助我

1st:id必须是唯一的

所以你的代码应该像

<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"));
});
相关文章：