JQuery: nextUntil () - странная проблема

Question

Я строю страницу, которая имеет иерархическую древовидную структуру.Я опубликовал его упрощенную версию на JSFiddle

В основном это работает так, как мне хотелось бы, но с одной стороны - при нажатии на закрытый ряд уровня бренда, который я хотел бы, такжекогда строки города и обуви сокращаются (что они и делают), якоря в строках города изменяют свой текст на «+».

Я пытался сделать это с

$(this).parent().parent().nextUntil(".TRBrand", ".TownToggle").text("+");

но попробуйте, как я мог, это не будет играть хорошо.

Может кто-нибудь направить меня в правильном направлении ...?

Answer 1

Вложенные списки лучше подходят для древовидных структур. Вы можете видеть, что js легче написать с такой разметкой:

http://jsfiddle.net/RANmK/1/

Answer 2

Было несколько проблем с вашей версией:

1. Последний <a> (для Reebok) имел неправильный класс: TRTown вместо TownToggle

2. Ваш nextUntil(...) для TownToggle останавливался только тогда, когда он видел .TRTown, что означает, что он слишком сильно прячется, когда является последним городом в списке, и продолжает скрывать также следующую марку.Также следует остановиться на .TRBrasnd.Вы можете указать оба селектора, разделив их запятой.

3. a.toggleTown не был правильно настроен при обновлении текстового значения до +

Если я правильно понимаю ваши требования, следующее должно делать то, что вы хотите: http://jsfiddle.net/Sx4qg/69/

$('.BrandToggle').click(function() {
    var t = $(this);
    var txt = t.text();
    var tr = t.closest("tr");
    if (txt == "+") {
        tr.nextUntil(".TRBrand", ".TRTown").show();
    } else {
        tr.nextUntil(".TRBrand", ".TRTown, .TRShoes").hide();
        tr.nextUntil(".TRBrand", ".TRTown").find("a.TownToggle").text("+");
    }
    t.text(txt == "+" ? "-" : "+");
});

$(".TownToggle").click(function() {
    var t = $(this);
    var txt = t.text();
    var tr = t.closest("tr");
    if (txt == "+") {
        tr.nextUntil(".TRBrand,.TRTown", ".TRShoes").show();
    } else {
        tr.nextUntil(".TRBrand,.TRTown", ".TRShoes").hide();
    }
    t.text(txt == "+" ? "-" : "+");
});

Answer 3

Надеюсь, что скрипка поможет

$(this).parent().parent().nextUntil("tr:not(.TRTown, .TRBrand)", ".TownToggle").text("+");

Answer 4

Попробуйте это:

$(this).parent().parent().nextUntil(".TRBrand").find('.TownToggle').text("+");

http://jsfiddle.net/sangdol/Sx4qg/64/