如何实现点击sbn类按钮时隐藏同一tr/td下的cnl类按钮

当前代码中$(".cnl").hide()会选中页面上所有class为cnl的按钮，导致点击任意Send按钮后所有Cancel按钮都被隐藏。要实现仅隐藏同一<td>或<tr>内的Cancel按钮，需要通过DOM遍历限制选择范围。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<tr>
<td>
  <button class="sbn">Send</button>
  <button class="cnl">Cancel</button>
  </td>
</tr>

<br />
<tr>
<td>
  <button class="sbn">Send</button>
  <button class="cnl">Cancel</button>
  </td>
</tr>

<br />
<tr>
<td>
  <button class="sbn">Send</button>
  <button class="cnl">Cancel</button>
  </td>
</tr>

<script type="text/javascript">
        $(document).ready(function() {
        $(".sbn").on('click', function() {
        $(this).html('clicked me!');
        $(this).attr('disabled', true);
        // 仅隐藏当前按钮所在同一<td>内的Cancel按钮
        $(this).siblings(".cnl").hide();
        // 或者如果要针对整个<tr>，可以用下面这行：
        // $(this).closest("tr").find(".cnl").hide();
    });
});
    </script>
</body>
</html>

关键修改说明 #

• $(this).siblings(".cnl"): 直接查找当前点击的Send按钮的同级元素中class为cnl的按钮，适合当前DOM结构（两个按钮在同一<td>内）。
• 如果后续DOM结构调整，比如Cancel按钮不在同一层级但在同一<tr>内，改用$(this).closest("tr").find(".cnl")会更稳定，它会先找到最近的<tr>父元素，再在其中查找目标按钮。

内容的提问来源于stack exchange，提问作者Eric Tum