jQuery как показать шкаф скрытый div с селектором классов

Question

Я исследовал jQuery ближайший(), next() и nextAll(), но ни один не относится к моему коду, так как я не настроен на дочерний/дочерний/дочерний. Мне не удалось выяснить, как выбрать ближайший скрытый div после нажатия ссылки, находящейся в пределах диапазона. Он работает с этим кодом, но он ужасно пахнет. Каков правильный способ написать это? Как я могу выбрать класс post_comments, который скрыт ниже моей ссылки Добавить комментарий?

Вот мой код:

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

    }); 

Ссылка на jfiddle от работы, но уродливый код 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/

Answer 2

Ваш невидимый ДИВ:

<div class="post_comments" style="display:none"> 
<input class="comment_input" type="text" placeholder="enter your comment" data-type="post" /> 
</div> 

В Jquery:

$(function(){ 
    $(".comment_count").click(function(e){   
     $(".post_comments").show(); 
     e.preventDefault(); 
    }); 

}); 

Answer 3

:hidden pseudoselector, скорее всего, что вы хотите.

Вы хотите первый скрытый div на странице?

$(".comment_count").click(function(e){ 
    var $test = $("div:hidden:first"); 
    $test.show(); 
    e.preventDefault(); 
}); 

UPDATED FIDDLE

---

Или первый скрытый post_comments DIV?

$(".comment_count").click(function(e){ 
    var $test = $("div.post_comments:hidden:first"); 
    $test.show(); 
    e.preventDefault(); 
}); 

UPDATED FIDDLE

Answer 4

$(function(){ 
    $(".comment_count").click(function(e){ 
     $(this).closest('.skittles').next().show(); 
     e.preventDefault(); 
    }); 

}); 

скрипку: http://jsfiddle.net/N5a2v/18/