javascript - jQuery:nextUntil()-奇怪的问题

我正在建立一个具有分层树型结构的页面。我已经在JSFiddle上发布了它的简化版本

它主要按照我的意愿工作，但有一个要点-单击关闭我想要的品牌级行，以及要收缩的城镇和鞋行（他们这样做），以更改城镇行上的锚点他们的文字为“ +”。

我试图这样做

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

但请尝试，因为可能效果不佳。

谁能指出我正确的方向...？

最佳答案

您的版本存在几个问题：


最后一个<a>（对于Reebok）具有错误的类：TRTown而不是TownToggle
您对nextUntil(...)的TownToggle仅在看到.TRTown时停止，这意味着当它是列表中的最后一个城镇时，它隐藏太多，并且也继续隐藏下一个品牌。它也应该在.TRBrasnd上停止。您可以通过用逗号分隔两个选择器来指定它们。
将文本值更新为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 == "+" ? "-" : "+");
});