jQueryのnextAll - H-要素をクリックして、次の時間まで、すべてのp要素をトグル

Question

私は答えは、質問をクリックすることでトグルされるFAQページを作成しています。質問はh3で、答えはいくつかのp要素です。このように：

<h3>The First Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

<h3>The Second Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

どのように私は特定の問題に属するすべてのp要素を切り替えることができますか？私のJSは、ページ上のすべての次p要素を切り替えます：

$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $(this).nextAll("p").toggle();
    });
});

私はdiv年代やクラスを使用することはできません）。

Answer 1

これを行うための最善の方法は、それぞれを使用して、あなたが繰り返しを停止する必要があり、次の要素に到達するまで反復されます。それぞれの間に偽を返すと、反復を停止します。フィルタを使用すると、反復で要素の種類を確認し、適切な対応をすることができます。

$(function() {
   $("p").hide();
   $("h3").click(function() {
       $(this).nextAll().each( function() {
           if ($(this).filter('h3').length) {
              return false;
           }
           $(this).filter('p').toggle();
       });
   });
});

Answer 2

私は、このようにそれを行うだろう。

$(function() {
  $("p").hide();
  $("h3").click(function() {
    $(this).nextAll().each(function() {
      if ($(this).is('h3')) {
        return false;
      }
      $(this).toggle();
    });
  });
});

）（それぞれから偽戻るチェーンを終了する。

可能な場合は

私はまた、このシナリオを処理するために、より良いあなたのデータを構造化、示唆しています。たとえばます：

<h3 class="question">Why is there no soup for me?</h3>
<div class="answer">
<p>...</p>
<p>...</p>
<p>...</p>
</div>

、その後、問題が解決するのは簡単になります：

$(function() {
  $("div.answer").hide();
  $("h3.question").click(function() {
    $(this).next().toggle();
  });
});

Answer 3

ここで.each使用していない興味深いソリューションは、（である）

$("h3").click(function() {

    var idx = $("h3,p").index(this);
    var nextIdx = ($("h3,p").index($(this).nextAll("h3")));
    var nextPs = (nextIdx == -1) ? $("h3,p").length - idx : nextIdx - idx;
    $(this).nextAll("p:lt(" + (nextPs - 1) + ")").toggle();

});

私は、インデックスによって次のPsを探しています。わからない、これはどのように実用的ですが、それは良い運動でした。

Answer 4

私が推薦する jQueryのnextUntil（）; の

$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $("h3").nextUntil("h3").toggle();
    });
});