正确的 jQuery 选择器是什么？我想获取所有带有 attr x 的 tr，它们位于给定 tr 的正下方（同一级别）

Question

我目前正在研究一棵树之类的东西，我希望能够折叠/展开孩子。我想最简单的方法是使用嵌套列表，但我无法使用它们，因为我无权访问 HTML 代码。这是相关的简化 HTML 代码：

<table>
    <tbody>
        <tr rel="1"><td><a href="#" id="fold">fold</a> item 1</td></tr>
        <tr rel="2"><td><a href="#" id="fold">fold</a> item 1.1</td></tr>
        <tr rel="2"><td><a href="#" id="fold">fold</a> item 1.2</td></tr>
        <tr rel="1"><td>item 2</td></tr>
        <tr rel="1"><td><a href="#" id="fold">fold</a> item 3</td></tr>
        <tr rel="2"><td><a href="#" id="fold">fold</a> item 3.1</td></tr>
        <tr rel="3"><td>item 3.1.1</td></tr>
        <tr rel="3"><td>item 3.1.2</td></tr>
</tbody>
</table>

如您所见，没有嵌套项目，但有可用的“级别”，所以我想应该可以实现我的想法。折叠/展开部分正在工作，当我单击第 1 项上的折叠时，rel >= 2 的项目将被隐藏。但这不是我想要的；我只想折叠 rel 高于我单击折叠的项目，并希望隐藏所有这些项目，直到到达 rel 低于或等于当前 rel 的元素。

例如，当我单击第 1 项中的折叠时，第 1.1 项和第 1.2 项应隐藏，但第 3.1 项应保持可见。

有没有人可以帮助我开始？谢谢。

比约恩

Answer 1

我认为您无法通过单个选择器来实现这一目标。这是我的方法： http://jsfiddle.net/RrnDG/1/ 请注意，我改变了将 id="fold" 更改为 class="fold"，因为多个 ID 具有相同值是无效的。 ID 应该是唯一的。

我在这里所做的（基本上）是：

• 获取单击行的级别
• 遍历所有后续行。对于每个做：
  • 检查级别是否更高（例如更深的嵌套）；如果为 true，则切换可见性，否则中止遍历

Answer 2

像这样的东西应该有效

$("#fold").click(function()
{
    var _current = $(this).parent().parent();
    var _level = _current.attr('rel');

    _current.nextAll().each(function()
    {
        if($(this).attr('rel') > _level){
            $(this).hide();
        }else{
            // Nested children stopped here, we don't continue
            return false;
        }
    });        
});