CODEWITHSUNDEEP
javascriptjquerytree
immutabl
immutabl

Reputation: 6903

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 

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

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

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

Upvotes: 1

Views: 486

Answers (4)

Shawn Chin
Shawn Chin

Reputation: 86974

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 == "+" ? "-" : "+");
});

Upvotes: 1

strada
strada

Reputation: 942

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/

Upvotes: 4

raymondralibi
raymondralibi

Reputation: 1953

Hope this fiddle will help

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

Upvotes: 1

Sanghyun Lee
Sanghyun Lee

Reputation: 23102

Try this:

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

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

Upvotes: 1

Related Questions