jQuery NextAll-H- 요소를 클릭하여 다음 h까지 모든 P- 요소를 토글합니다.

Question

질문을 클릭하여 답변이 전환되는 FAQ 페이지를 만들고 있습니다. 질문은 ~이야 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();
    });
});

나는 사용할 수 없다 divS 또는 클래스).

Answer 1

이를 수행하는 가장 좋은 방법은 반복을 중지 해야하는 다음 요소에 도달 할 때까지 각각을 사용하고 반복하는 것입니다. 각각 동안 거짓을 반복하면 반복이 중지됩니다. 필터를 사용하면 반복의 요소 유형을 확인하고 적절하게 응답 할 수 있습니다.

$(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();
    });
  });
});

각 ()에서 거짓을 반환하면 체인이 종료됩니다.

또한 가능하면이 시나리오를 처리하기 위해 데이터를 더 잘 구성하는 것이 좋습니다. 예를 들어:

<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();

});

INDEX별로 다음 PS를 찾고 있습니다. 이것이 얼마나 실용적인지 잘 모르겠지만 좋은 운동이었습니다.

Answer 4

추천합니다 jQuery nextuntil ();

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