jquery - クリックされたものとは異なる要素を選択するjqueryセレクター

Question

これは単純化された html です。

<div id="l01">
<ul style="width:450px;">
<li><img src="images/iconarrow.gif" alt="arrow" width="9" height="11" align="left" />&nbsp;
<a href="#">Preview</a>                            
</li>

<li class="showStats"><a class="showstatlink" href="javascript:{}"><img class="sstatsImage" src="images/iconarrow.gif"  />&nbsp;
                        Show Stats</a>                            
</li>                         
</ul>                       
</div>
<div class="sstatsDetails">
        ...
</div>

class='showstatlink' をクリックしたいのですが、そのクリックで class='sstatsDetails' のトグルをトリガーしたいのですが、次の 1 つだけです。そのクラスを持つページ上のすべての要素をトグルしたくはありません。 .

Answer 1

$(".showstatlink").click(function() {
    // Your code to handle the event.
    $(".sstatsDetails").show();  // Or hide whatever you want to do.
});

Answer 2

このようなことを試してください：

$(".showstatlink").on("click", function(){
    $(this).parent().parent().parent().next(".sstatsDetails").toggle();
});

ここで実際の動作を見ることができます。