JQuery：nextUntil（） - 奇妙な問題

Question

私は、階層ツリー型の構造を持つページを構築しています。私はそれの簡略化されたバージョンを投稿しましたJSFiddle

これは主に私が望むように働いていますが、クリックするとブランドレベルの行を閉じた上で、町と靴の行が収縮する（彼らはそうします）、Town行のアンカーがテキストを '+'に変更します。

私は

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

と、そう私はそれがうまく再生されません可能性があるとしようとすることを試みてきました。

誰かが正しい方向に向けることができますか？

Answer 1

お使いのバージョンにはいくつかの問題がありました：

1. が最後<a>（リーボック用）は、間違ったクラスを持っていた：TRTownTownToggle

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 2

これを試してみてください：

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

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

Answer 3

ホープ、このfiddleが

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

Answer 4

ネストされたリストは、構造物のような木のために優れているのに役立ちます。あなたはこのマークアップを書くことが容易であるJSを見ることができます：

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