javascript - 在 DOM 层次结构中向上移动几个级别到包含的表行

Question

我有一个像这样的 HTML 结构:

<tr class = "@rowOrdinal" id = "...">                            
    <td>
        <a href = "#">
            <img src = "/Content/updateIcon.gif" class = "updateResourceImageButton" id = "..." />
        </a>
        &nbsp;

        <a href = "#">
            <img src = "/Content/cancelIcon.gif" class = "cancelImageButton" />
        </a>
        &nbsp;
    </td>

    <td class = "hiddenColumn" id = ...>...</td>
    <td class = "resourceKeyColumn" id = ...>...</td>
    ... and so on...

单击更新链接时，我想获取对行的引用，即更新超链接所在的 tr 元素。

因此，在下面的事件监听器中，我想将 DOM 层次结构提升几个级别。我可以使用简单的 JavaScript 并使用 while 循环来获取 parentNode，但是如何使用 jQuery 做到这一点？

function WireHandlers() {
    $('.updateResourceImageButton').click(UpdateResourceLinkClickedHandler);
}

function UpdateResourceLinkClickedHandler() {
  // how do I get a reference to the tr that contains
  // the hyperlink which is the source of this event?
}

$(document).ready(function () { WireHandlers(); });

Answer 1

您正在寻找.closest()方法:

function UpdateResourceLinkClickedHandler() {
    var $tr = $(this).closest('tr');
}