Question

I researched jQuery closest(), next(), and nextAll() but none relate to my code since I am not targeting an ancestor/sibling/ nor child. I wasn’t able to figure out how to select the closest hidden div after clicking a link that is within a span. It works with this code but it smells terrible. What is the correct way to write this? How can I select the “post_comments” class that is hidden below my Add Comment link?

Here is my code:

<div class="skittles">
<span>
    <a href="#" class="comment_count">Add Comment</a>
</span>
<span>3 days ago</span>
</div>

<div class="post_comments hidden">
<input class="comment_input" type="text" placeholder="enter your comment" data-type="post" />
</div>

jQuery

  $(function(){
        $(".comment_count").click(function(e){
            var $test = $(this).parent().parent().next();
            $test.show();
            e.preventDefault();
        });

    });

A link to jfiddle of the working but ugly code
http://jsfiddle.net/N5a2v/9/

Answer 1

$(function(){
    $(".comment_count").click(function(e){
      $(this).parents("div.skittles").next("div.post_comments").show();        
        e.preventDefault();
    });

});

http://jsfiddle.net/N5a2v/13/