ハイパーリンクの後にテーブルを取得するにはどうすればよいですか？

Question

テーブルはハイパーリンクの兄弟ではありませんか？ 私が持っている：

<a href="JavaScript:;">Show me the table</a> 
<table class="hidden"> 
... 
</table> 

Q：どのようなjQueryのセレクタ私はアンカータグ以下の表を取得するために使用するのですか？

$('a').click(function() { 
    $(this).something.slideDown(); 
}); 

Answer 1

私は強くないは、あなたのテーブルには、常に隣接することになると仮定すると示唆しています。今のところかもしれませんが、何らかの理由でコードを移動する必要がある場合は、コードが破損します。

問題を解消して、テーブルの識別子をアンカー要素に格納します。 1つのオプションは、data attributesを使用してセレクタを保存することです。

<a href="#" data-target-table="#table1">Show me the table</a> 
<table id="table1" class="hidden"> 
    ... 
</table> 

、それは.data()

$('a').click(function() { 
    var $this = $(this); 
    var $table = $($this.data('targetTable')); 
    $table.something.slideDown(); 
}); 

代替を使用して取得するには、各要素に対して、共通のクラスを持っているし、テーブルを選択するためにそれを使用することです。

Answer 2

DOM内の同じレベルの要素にアクセスするには、.next（）または.siblings（）を使用します。だから、

あなたが使用することができ、あなたの例では：

$('a').click(function() { 
    $(this).siblings('table').slideDown(); 
}); 

Answer 3

$('a').click(function(){ 
    $(this).next().slideDown(); 
});