jQuery nextAll — Щелчок по h-элементу переключает все p-элементы до следующего h

Question

Я создаю страницу часто задаваемых вопросов, где ответ переключается нажатием на вопрос.Вопрос в том, h3 и ответ заключается в нескольких p-элементы.Вот так:

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

Как я могу переключить все p-элементы, относящиеся к определенному вопросу?Мой JS переключает все следующие p-элементы на странице:

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

Я не могу использовать div'ы или классы).

Answer 1

Лучший способ сделать это - использовать каждый из них и повторять до тех пор, пока вы не перейдете к следующему элементу, который должен остановить итерацию.Возврат false во время каждого из них останавливает итерацию.Использование filter позволяет вам проверить тип элемента в итерации и отреагировать соответствующим образом.

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

Answer 2

Я бы сделал это таким образом:

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

Возврат false из each() завершает цепочку.

Я бы также предложил, если возможно, лучше структурировать ваши данные, чтобы справиться с этим сценарием.Например:

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

и тогда проблема становится тривиальной для решения:

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

Answer 3

Вот интересное решение, которое не использует .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();

});

Я ищу следующий Ps по индексу.Не уверен, насколько это практично, но это было хорошее упражнение.

Answer 4

Я бы порекомендовал jQuery nextUntil() jQuery nextUntil();

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