Какой правильный JQuery селектор для этого?Я хочу получить все tr с attr x, которые находятся непосредственно под (того же уровня), заданного 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 скрываются.Но это не то, что я хочу;Я только хочу сложить элементы, значение которых выше, чем тот, на котором я щелкнул, свернуть, и хочу скрыть их все, пока не достигну элемента, значение которого меньше или равно текущему значению.

Например,, когда я нажимаю кнопку сгиба в пункте 1, пункты 1.1 и 1.2 должны быть скрыты, но пункт 3.1 должен оставаться видимым.

Есть ли кто-нибудь, кто может помочь мне начать?Спасибо.

Бьорн

Answer 1

Я не думаю, что вы можете достичь этого с помощью одного селектора.Это мой подход: http://jsfiddle.net/RrnDG/1/ Обратите внимание, что я изменил ваш id="fold" на class="fold", так как наличие нескольких идентификаторов с одинаковым значением недопустимо.Идентификатор должен быть уникальным.

То, что я делаю здесь, это (в основном):

• получить уровень щелкаемой строки
• пройти все следующие строки.для каждого делайте:
  • проверка, если уровень выше (например, глубже вложенный);если 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;
        }
    });        
});