使用此樹遍歷遍歷DOM？幫助JQuery

Question

我需要遍歷DOM來選擇.faq-answer並在點擊.faq-question a時顯示它。我想我需要使用「這個」，但我不知道下一步該怎麼做。

    <div class="faq-question"> 
         <?php 
         // display a sub field value 
          echo '<p>Question: </p>'; 
          the_sub_field('faq_question'); 
         ?> 
         <a href="#" class="";></a> 
        </div> 
        <div class="faq-answer""> 
         <?php 
         // display a sub field value 
          echo '<div class="faq-answer-answer">'; 
          echo '<p>Answer: </p>'; 
           the_sub_field('faq_answer'); 
          echo '</div>'; 
         ?> 
         <a href="#" class="";></a> 
        </div> 

<script> 
    $(document).ready(function(){ 
     $(".faq-answer").hide(); 

     $(".faq-question a").click(function() { 
      $(".faq-answer").toggle("slide"); 
     }); 
    }); 

</script> 

Answer 1

因爲.faq-answer是繼.faq-question的兄弟元素緊跟其後的，則可以使用parent()去的問題DIV，然後next()得到答案DIV：

$(".faq-question a").click(function() { 
    $(this).parent().next().toggle("slide"); 
}); 

這顯然有點脆弱;對HTML的小改動將會破壞它。我們可以減輕使用closest的第一位，而不是parent()：

$(".faq-question a").click(function() { 
    $(this).closest(".faq-question").next().toggle("slide"); 
}); 

同樣，如果你可能要打滑的問題與答案之間的元素，我們可以使第二部分（next()）有點少脆弱以及通過查找第一下一個匹配的元素：

$(".faq-question a").click(function() { 
    $(this).closest(".faq-question").nextAll(".faq-answer").first().toggle("slide"); 
    // Find all following answers ---^     ^
    // Take the first one (they'll be in order) ------------| 
}); 

當可能（它不總是），我喜歡用一個容器元素周圍相關的項目是這樣的：

<div class="qa-container"> 
    <div class="faq-question"> 
     <?php 
     // display a sub field value 
      echo '<p>Question: </p>'; 
      the_sub_field('faq_question'); 
     ?> 
     <a href="#" class="";></a> 
    </div> 
    <div class="faq-answer""> 
     <?php 
     // display a sub field value 
      echo '<div class="faq-answer-answer">'; 
      echo '<p>Answer: </p>'; 
       the_sub_field('faq_answer'); 
      echo '</div>'; 
     ?> 
     <a href="#" class="";></a> 
    </div> 
</div> 

每個問題和答案對將被包裹在.qa-container。然後它更加強大：

$(".faq-question a").click(function() { 
    $(this).closest(".qa-container").find(".faq-answer").toggle("slide"); 
});