查找最接近的类实例

Question

I have a list of comments with a reply option. When the reply button is clicked a form should appear below the comment.

HTML:

<div id="" class="comment">
    <div class="comment-message">Message
        <div class="information"> 
            <a id="" class="comment-reply" href="/comments/reply/"> Reply </a>
        </div>
    </div>
</div>
<div class="test">Test</div>

CSS:

.test{display:none;}

jQuery:

 $('.comment-reply').live("click", function(e) {
    e.preventDefault();
    $this = $(this);
    $this.closest('.test').toggle();
});

I have tried using the following:

$this.closest('.test').toggle();

Any help on this would be much appreciated , Thank you.

Answer 1

If your html structure is same then you can try below,

$(this).closest('.comment').next().toggle()

In case if there are some elements between the Reply section and the test then use .nextAll

$(this).closest('.comment').nextAll('.test').toggle()

Answer 2

Try this:

If you have other closest elements and not only the comment with class .test , you need to make sure of getting the correct element doing the following:

$(this).closest('.comment').next('.test').toggle();