Question

我有一个脚本工作，当点击另一个链接时显示隐藏next（）tbody元素，但它是uuuugly，我相信我可以更有效地做到这一点。具体来说，我不喜欢使用4个parent（）调用！有没有比这更好的方法来遍历事物呢？

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Pooey long jQuery example</title>
</head>
<body>
    <table class="thin">
        <tbody class="shown_rows">
            <tr>
                <td><span>td1</span></td>
                <td><span>td2</span></td>
                <td><span><a href="#" class="do-thing">Show</a></span></td>
            </tr>
        </tbody>
        <tbody class="hidden_rows">
            <tr>
                <td colspan="7"><span>Temp txt</span></td>
            </tr>
        </tbody>
        <tbody class="shown_rows">
            <tr>
                <td><span>td1</span></td>
                <td><span>td2</span></td>
                <td><span><a href="#" class="do-thing">Show</a></span></td>
            </tr>
        </tbody>
        <tbody class="hidden_rows">
            <tr>
                <td colspan="7"><span>Temp txt</span></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS：

table td {border: 1px solid black;padding:2px;}
table .shown_rows * span {
    width:100px; display:block
}

jQuery的：

$(".hidden_rows").hide();
$(".do-thing").click(function(e) {
     $(this).parent().parent().parent().parent().next("tbody").toggle("fast");
});

jSFiddleydeeee： This example on jsFiddle

有什么想法？

（注意，我是故意使用跨度，这只是问题的一个简化示例，所以它在FF和IE中看起来很可怕。

Answer 1

是的，使用closest将树上移到与选择器匹配的最近元素，然后。

$(this).closest('tbody').next('tbody').toggle('fast');

请注意next('tbody')几乎可以肯定缩短为next()，因为您没有thead或tfoot元素。

Answer 2

使用closest jQuery方法获取与选择器匹配的第一个元素，从当前元素开始并逐步向上遍历DOM树。

$(this).closest('tbody').next().toggle('fast');

在jQuery中访问远程表亲的更好方法

2 个答案: