のjQuery：よくある質問スタイル

Question

私は、次のしている：

<table class="site"> 
<tr> 
    <td> 
     <span style="float: right;" class='show'>Show More</span> 
    </td> 
</tr> 
<tr class="site_info"> 
    <td><%= site.id %></td> 
</tr> 
<tr> 
    <td align='right'> 
More 
    </td> 
</tr> 
</table> 

いつでも誰かが ".SHOW" をクリックすると、私はそれが ".site_info"（起動時に隠された）を表示します。私はちょうどsite_info部分を選択/見つけることができるように見えることはできません

$('.site_info').hide().css('cursor', 'pointer'); 
$('.show').click(function() { 
    $(this).find('.site_info').slideToggle(); 
}); 

：私は、以下を含む多くのことを、試してみました。

Answer 1

$('.site_info').hide().css('cursor', 'pointer'); 
$('.show').click(function() { 
    $(this).parents("table").find('.site_info').show("slideToggle"); 
}); 

Answer 2

$('.site_info').hide().css('cursor', 'pointer'); 
$('.show').click(function() { 
    $('.site_info').show("slow"); 
}); 

Answer 3

findコマンドは、現在の要素の子孫のみを検索します。

は `children`と混同しないように、` find`検索 "子孫"

$(this).parents("table").find(".site-info").slideToggle(); 

Answer 4

$(".site_info").hide().css("cursor", "pointer"); 
$(".show").click(function() { 
    $(this).closest("table.site").find("tr.site_info").slideToggle(); 
});