jQuery nextAll - Haga clic en h-elemento cambia todos los elementos P hasta el próximo h

Question

Estoy creando una página de preguntas frecuentes donde la respuesta se activa haciendo clic en la pregunta. La pregunta es h3 y la respuesta es p varios elementos. De esta manera:

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

¿Cómo puedo cambiar todos p-elementos que pertenecen a una determinada pregunta? Mi JS activa y desactiva todos los siguientes p-elementos en la página:

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

No puedo usar o clases de div).

Answer 1

La mejor manera de hacerlo es usando cada uno y la iteración hasta llegar al siguiente elemento que debe detener la iteración. Volviendo falsa durante una cada detiene la iteración. El uso del filtro le permite comprobar el tipo de elemento en la iteración y responder adecuadamente.

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

Answer 2

Me gustaría hacerlo de esta manera:

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

Volviendo falso de cada () termina la cadena.

Me gustaría también sugieren, si es posible, estructurar mejor sus datos para manejar esta situación. Por ejemplo:

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

y después el problema se vuelve trivial para resolver:

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

Answer 3

Aquí es una solución interesante que no utiliza 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();

});

Estoy buscando la siguiente Sal por el índice. No está seguro de qué tan práctico es esto, pero fue un buen ejercicio.

Answer 4

Yo recomendaría jQuery nextUntil ();

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