jQuery 如何使用类选择器显示最近的隐藏 div

Question

我研究了 jQuery closeest()、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

:hidden 伪选择器可能就是您想要的。

您想要页面上的第一个隐藏 div 吗？

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

更新的 FIDDLE

---

或第一个隐藏的 post_comments div ？

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

更新的 FIDDLE

Answer 3

你的隐形 div：

<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 4

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

});

小提琴：http://jsfiddle.net/N5a2v/18/