jQuery $(this).closest show & hide

Question

我有一个包含多行的表格。每行都有一个“显示详情”按钮和一个“隐藏详情”按钮。当单击“显示详情”按钮时，我希望“隐藏详情”按钮仅针对特定行显示。我认为.closest()函数会起作用，但实际上并没有。

以下是HTML代码：

<table>
    <tr id="1">
      <td><button class='view'>View Details</button><button class='hide' style='display:none;'>Hide Details</button></td>
    </tr>

    <tr id="2">
      <td><button class='view'>View Details</button><button class='hide' style='display:none;'>Hide Details</button></td>
    </tr>
</table>

这里是jQuery。

$(".view").click(function() {   
    $("#patient").show("");
    $(this).hide();
    $(this).closest(".hide").show();
});

- Chris Olson

Answer 1

.closest 只会查看当前元素和其父元素。如果要查找所有祖先元素，则需要像这样进行：

$(this).parent().find('.hide');

或

$(this).siblings('.hide');

- kalley

Answer 2

您是否在DOM准备好后进行绑定？尝试以下方法：

$(function(){
    $(".view").click(function() {   
        $("#patient").show("");
        $(this).hide().next().show();
    });
});

- Prasanth

Answer 3

尝试使用next()代替closest()。 http://api.jquery.com/next/ http://api.jquery.com/siblings/ 通常在使用closest时，您需要提供一些额外的信息，例如要查找的类或其他内容。

- Nick