Question

我研究了jQuery nearest（），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();
});

UPDATED FIDDLE

或第一个隐藏的post_comments div？

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

UPDATED 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/

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

4 个答案: