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

Question

Je crée une page FAQ où la réponse est permutée en cliquant sur la question. La question est h3 et la réponse est plusieurs p -elements. 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 p -elements appartenant à une certaine question? Mon JS désélectionne tous suivant p -elements sur la page:

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

Je ne peux pas utiliser div « s ou des classes).

Answer 1

La meilleure façon de le faire est d'utiliser chacun et itérer jusqu'à ce que vous obtenez à l'autre élément qui devrait arrêter l'itération. Renvoyer false pendant un chaque arrête l'itération. L'utilisation du filtre vous permet de vérifier le type de l'élément dans l'itération et de répondre de manière 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(); 
    }); 
    }); 
}); 

renvoie false each() termine la chaîne.

Je suggère également, si possible, de mieux structurer vos données pour 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 devient trivial à résoudre:

$(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 à quel point c'est pratique, mais c'était un bon exercice.

Answer 4

Je recommande jQuery nextUntil();

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