使用此树遍历遍历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"); 
});