jQuery nextAll - Clicca su h-elemento alterna tutti i p-elementi fino al prossimo h

Question

Sto creando una pagina di FAQ in cui la risposta è attivata cliccando sulla questione. La domanda è h3 e la risposta è di diversi p-elementi. In questo modo:

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

Come posso attivare o disattivare tutti p elementi appartenenti a una determinata domanda? Il mio JS alterna tutto seguendo p elementi sulla pagina:

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

Non riesco a usare div del o classi).

Answer 1

Il modo migliore per farlo è usare ogni iterazione e fino ad arrivare al successivo elemento che dovrebbe fermare l'iterazione. Tornando falso durante ogni arresta l'iterazione. Per mezzo del filtro consente di verificare il tipo di elemento nell'iterazione e rispondere adeguatamente.

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

Answer 2

Vorrei fare in questo modo:

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

Tornando falsa da ogni () termina la catena.

Vorrei anche suggerire, se possibile, la strutturazione dei dati migliore per gestire questo scenario. Ad esempio:

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

e quindi il problema diventa banale da risolvere:

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

Answer 3

Ecco una soluzione interessante che non utilizza .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();

});

Sto cercando la prossima Ps in base all'indice. Non sono sicuro di come pratico questo è, ma è stato un buon esercizio.

Answer 4

jQuery nextUntil ();

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