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');
}

Answer 2

function WireHandlers() {
    $('.updateResourceImageButton').click( function(){

        var trParent = $( this ).parent().parent();
        UpdateResourceLinkClickedHandler();
    });
}

不知道为什么需要父 tr 参考，所以在我的示例中没有使用它