jQuery - 使用 .closest() 突出显示表格行不起作用答案

【问题标题】：jQuery - highlight table row with .closest() not workingjQuery - 使用 .closest() 突出显示表格行不起作用
【发布时间】：2021-12-28 18:13:29
【问题描述】：

我想在点击锚点时通过背景颜色突出显示目标行

<table>
    <tr> <!-- highlight me! -->
        <td>
            <span id="A-1PP-05">A-1PP-05</span>
        </td>       
    </tr>

    <tr>...</tr>

    <tr>...</tr>    
</table>

<script>
(function($) {
    $(document).on('click', 'a[href^="#"]', function(e) {
        // target element id
        var id = $(this).attr('href');

        // target element
        var $id = $(id);

        // top position relative to the document
        var pos = $id.offset().top;

        // animated top scrolling
        $('body, html').animate({scrollTop: pos - 120});
    });
    
    $(':target').closest('tr').css('background', 'yellow');

})(jQuery);
</script>

这行代码不起作用：

$(':target').closest('tr').css('background', 'yellow');

单击锚点只会向下滚动到带有id 的<span>，但不会突出显示其父元素<tr>。

【问题讨论】：

您的点击处理程序以 a 链接为目标，但您的 HTML 不包含 a 链接。
您的$(':target') 行不应该在您的点击处理程序中吗？

标签： jquery

【解决方案1】：

在点击处理程序之外使用$(':target')，它只在页面加载时运行一次。那个时候，可能根本就没有 URL 片段，所以选择器什么都不匹配，什么也没有发生。

如果您将该行移到内部点击处理程序，它将在点击发生时运行，这就是您想要的。然而，仍然存在问题。 AFAICT 该代码在浏览器中实际 URL 片段发生更改之前运行。时间线好像是这样的：

click on anchor ---> event handler runs ---> URL fragment updates

您可以通过测试来验证这一点 - 如果您在同一锚点上单击 2 次链接，则在第二次单击时会突出显示正确的 tr，因为在第二次单击时，该片段已经在 URL 中。或者，如果您单击一系列不同的锚点，则突出显示的行始终位于您单击的后面，因为那是上次单击的 URL 中的片段。

看来，如果你想使用$(':target') 选择器，你需要做一些时间/异步相关的技巧来等到锚更新。这似乎非常冒险且不切实际。

但是有更简单的解决方案 - 您已经拥有要突出显示的 tr 的 id，您甚至可以将其作为 jQuery 对象，并保存为变量。使用 HTML id 是 jQuery 在页面上选择元素的最有效方式，而且您已经这样做了，所以这确实是理想的选择。只需将 $(':target') 替换为 $id 即可。

请注意，此代码在 SO 上不能作为 sn-p 工作，这与沙箱没有更新我猜的实际 URL 有关。但它在 JSFiddle 上运行良好 - here's a working JSFiddle。

(function($) {
  $(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos - 120});

    // Remove all bg colours so we can see while testing
    $('tr').css('background', 'none');

    // Highlights previously clicked tr/fragment, no good
    $(':target').closest('tr').css('background', 'yellow');

    // Works without problem!
    // $id.closest('tr').css('background', 'yellow');
})(jQuery);

【讨论】：