jQuery nextAll - Cliquez sur h-élément permet de basculer tous les éléments p jusqu'à la prochaine h

Question

Je crée une page FAQ où la réponse est basculée en cliquant sur la question. La question est h3 et la réponse est plusieurs éléments p. Comme ceci:

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

Comment puis-je basculer tous les éléments p-appartenant à une certaine question? Mon JS désélectionne tous les éléments suivants de p-sur la page:

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

Je ne peux pas utiliser ou de cours div).

Answer 1

La meilleure façon de faire est d'utiliser chacun et itérer jusqu'à ce que vous obtenez à l'autre élément qui devrait arrêter l'itération. De retour faux lors d'une itération chaque arrête la. En utilisant le filtre vous permet de vérifier le type de l'élément dans l'itération et de répondre de façon appropriée.

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

Answer 2

Je le ferais de cette façon:

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

retour faux à partir de chaque () extrémités de la chaîne.

Je suggère également, si possible, la structuration de vos données pour mieux gérer ce scénario. Par exemple:

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

et le problème trivial à résoudre devient:

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

Answer 3

Voici une solution intéressante qui n'utilise pas .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();

});

Je suis à la recherche de la prochaine Ps par index. Je ne sais pas comment cette pratique est, mais ce fut un bon exercice.

Answer 4

Je recommande jQuery nextUntil ();

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