JQuery: nextUntil() - weird problem

I'm building a page that features a hierarchical tree-type structure. I've posted a simplified version of it at JSFiddle

It mostly works as I'd like but for one thing - on clicking closed a Brand-level row I would like, as well as the town and shoe rows to contract (which they do), for the anchors on the Town rows to change their text to '+'.

I've attempted to do so with

$(t开发者_开发百科his).parent().parent().nextUntil(".TRBrand", ".TownToggle").text("+");

but try as I might it won't play nicely.

Can anyone point me in the right direction ...?

Nested lists are better for tree like structures. You can see the js is easier to write with this markup:

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

There were several problems with your version:

1. The last <a> (for Reebok) had the wrong class : TRTown instead of TownToggle

2. Your nextUntil(...) for TownToggle was only stopping when it sees .TRTown, which means it hides too much when it is the last Town in the list and continues to hide the next brand as well. It should also stop on .TRBrasnd. You can specify both selectors by seperating them with a comma.

3. a.toggleTown was not targetted correctly when updating the text value to +

If I understand your requirements correctly, the following should do what you want: 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 == "+" ? "-" : "+");
});

Try this:

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

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

Hope this fiddle will help

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