jQuery nextAll - Klicken Sie auf h-Element schaltet alle p-Elemente bis zum nächsten h

Question

Ich erstelle eine FAQ-Seite, wo die Antwort durch Klicken auf die Frage hin- und hergeschaltet wird. Die Frage ist h3 und die Antwort ist mehrere p-Elemente. Wie folgt aus:

<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>

Wie kann ich wechseln alle p-Elemente zu einer bestimmten Frage Zugehörigkeit? Mein JS Knebel alle folgenden p-Elemente auf der Seite:

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

Ich kann nicht div oder die Klassen verwenden).

Answer 1

Der beste Weg, dies zu tun, wird mit jedem und iteriert, bis Sie auf das nächste Element erhalten, das die Iteration stoppen sollte. Wiederkehrende falsch während eines jeden stoppt die Iteration. Mit Filter können Sie den Typ des Elements in der Iteration prüfen und entsprechend reagieren.

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

Answer 2

Ich würde es auf diese Weise tun:

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

Zurückgeben von jedem falschen () die Kettenenden.

Ich würde auch vorschlagen, wenn möglich, Ihre Daten besser zu strukturieren, dieses Szenario zu behandeln. Zum Beispiel:

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

und dann wird das Problem trivial zu lösen:

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

Answer 3

Hier ist eine interessante Lösung, die nicht .each nicht verwendet ()

$("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();

});

Ich bin auf der Suche für die nächste Ps durch den Index. Nicht sicher, wie praktisch das ist, aber es war eine gute Übung.

Answer 4

Ich würde empfehlen, jQuery nextUntil ();

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