Question

我有一个简单的jQuery，如果选中，它会显示当前一行下面的行。

对于所有<td>元素，我想要的只是一个触发此方法的元素。

适用于整个<tr>行

        $(document).ready(function(){

        $("#report > tbody > tr.odd").click(function(){
            $(this).next("#report tr").fadeToggle(600);
        });
    });

想做某事（不起作用）

    $(document).ready(function(){

        $("#report > tbody > tr.odd > td.selected").click(function(){
            $(this).next("#report tr").fadeToggle(600);
        });
    });

Answer 1

在您的非工作代码中，$(this)是<td>元素。

因此，$(this).next("#report tr")与任何内容都不匹配。（因为<td>元素没有<tr>元素作为兄弟姐妹）

您需要将其更改为$(this).closest('tr').next("#report tr")才能找到“uncle”元素。您也可以拨打.parent()而不是.closest('tr')，但即使您将.closest处理程序绑定到click的子级，调用<td>也会继续有效。< / p>

Answer 2

你需要这样的东西：

 $(document).ready(function(){
    $("#report tr:not(.odd)").hide();
    $("#report tr:first-child").show();

    $("#report > tbody > tr.odd > td.selected").click(function(){
        $(this).closest("tr").next("tr").fadeToggle(600);
    });
});

由于您点击了td，因此在尝试获取下一行之前需要前往该行。此选择器在大多数情况下也应该相同：#report td.selected。由于您无法逃脱#report与兄弟姐妹的联系，#report tr也可能只是tr中的next()。

td行上的jQuery click事件未触发

2 个答案: