divが同じコードブロックにない場合、jqueryは同じクラスのdivを切り替えます。

Question

私は非常に単純な問題がありますが、解決策を見つけることができません。私は.parent（）、.next（）、.find（）を使うことについて多くの言及を見つけましたが、それらのどれも私が期待していることをしていません。 Ether同じクラス名のすべてのdivは、同時に展開したり崩壊したり、まったく動かない。

私がここで探しているのは、同じクラス名を使用し、クリックしたものだけを展開して折りたたむことです。私はそれが1でそうしたいときは、それらのすべてを拡張し、崩壊する

$(".expand").click(function() { 
    $(".extras").toggle(); 
}); 

：

HTML：：

<table> 
    <tr> 
    <td><div class="expand">More Details</div></td> 
    <tr/> 
    <tr> 
    <td> 
     <div class="extras" style="display:none;"> 
     <table> 
      <tr><td>Some Data</td></tr> 
     </table> 
     </div> 
    </td> 
    </tr> 
    <tr> 
    <td><div class="expand">More Details</div></td> 
    <tr/> 
    <tr> 
    <td> 
     <div class="extras" style="display:none;"> 
     <table> 
      <tr><td>Some Data</td></tr> 
     </table> 
     </div> 
    </td> 
    </tr> 
</table> 

jQueryの私はこのような何かを持っています"expand" divでクリックすると、下の "extras" divが表示されます。

Answer 1

$(".expand").click(function() { 
    $(this).closest("tr").next("tr").find(".extras").toggle(); 
}); 

手段：

$(this)   // Start from here 
.closest("tr") // go up 
.next("tr")  // go to next 
.find(".extras") // find element 
.toggle();  // do tha thing