用这个树遍历DOM?帮助JQuery

Question

我需要遍历DOM来选择.faq答案，并在点击.faq问题a时显示它。我想我需要使用"this"，但我不知道下一步该怎么做。

                    <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" );
});