jQueryクラスセレクタでクローズド隠しdivを明らかにする方法

Question

jQuery closest（）、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：

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