javascript - 使用 jQuery 显示隐藏行最接近选定的行

Question

我对 jQuery 还很陌生，但当用户选择它上面的(可见)行时，我试图显示最近的隐藏表行。

HTML

 Click on a row for more info:
<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr class="child"><td><p>Blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr class="child"><td><p>Blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr class="child"><td><p>Blah blah blah.</p>
    </td></tr>    
</table>

jQuery

$(function() {
    $("tr.child").hide();

    $("table").click(function(event) {
        event.stopPropagation();

        var $target = $(event.target);
        $target.closest("tr.child").toggle();
    });
});

这是一个fiddle 。任何帮助表示赞赏。

Answer 1

.closest() 遍历祖先的 DOM 结构。

对于给定的表结构，下一个 tr 应使用 .next() 切换

你可以做这样的事情

$("table tr").click(function(event) {
    $(this).next(".child").toggle();
});

这是一个演示 https://jsfiddle.net/dhirajbodicherla/mfwYS/1166/