2011-07-19 9 views
9

入力ボタンの後に次のdivを見つけようとしています。jQuery - 次のDivの検索

私は間違っていますか?

JS:

$(".showNextExperience").click(function() { 
    $(".experience").show(); 
}); 

HTML:私はちょうどそれが動作DIVの上に入力ボタンを移動すると

<input class="showNextExperience" > 
<div class="experience">Experience 1</div> 

<input class="showNextExperience"> 
<div class="experience">Experience 2</div> 

<input class="showNextExperience"> 
<div class="experience">Experience 3</div> 

<input class="showNextExperience" > 
<div class="experience">Experience 4</div> 

さて、これは---

$(".showExperience").click(function() { 
    $(this).next(".experience").toggle(); 
}); 

<table class="data"> 
    <tr class="tableHead"> 
     <td></td> 
     <td width="50" align="right"><input type="button" class="showExperience" value="show"></td> 
    </tr> 
</table> 
<div class="experience">2</div> 

を動作しません。ちょうど良い。

$(".showExperience").click(function() { 
    $(this).next(".experience").toggle(); 
}); 

<input type="button" class="showExperience" value="show"> 
<div class="experience">2</div> 

説明できますか?単に

+1

あなたの質問に対する遅い回答として、テーブル内のボタンが機能しなかった理由を教えてください。 'next( 'showExperience')'はそのクラスの次の兄弟を探しますが、あなたのボタンは検索する兄弟は0です。そして、入力タグが決して閉じない(ダーティーコーディング)と上記の空のtd(非常に汚れたコーディング)を追加することがあります、本当に単一のボタンが含まれている場合は、全体のテーブルのポイントは何でしたか? > _ < –

答えて

14

$(".showNextExperience").click(function() { 
    $(this).next(".experience").toggle(); 
}); 

参照:

+0

これは正解であり、まさに私がやっていることです。それは私のためには機能しません。私のテーブルで何かが間違っています。入力ボタンがテーブルの外にあるときは、正常に動作します。同じボタンをテーブルの中にカット/カットすると、そのボタンは機能しなくなります。ありがとう! –

+4

'.next'は*非常に次の兄弟*だけを選択するためです。テーブル要素の場合は、おそらく親行まで移動し、次の行を見つけて行内の '.experience' divを見つける必要があります。 DOM構造が重要です!例えば'$(this)).closest(" tr ")。next()。find("。experience ")。toggle()' – karim79

+0

あなたは100%!!!しかし、それは醜い解決策です。私の部門はテーブルの後です。 parent()。parent()。parent()。next( "div.experience")に行く必要がありますか?それとも何か?私はそれを働かせることはできません。 –

3

$(".showNextExperience").click(function() { 
    $(this).next("div.experience").toggle(); 
}); 
これを試してみてください
0

$(this).siblingings().eq(0)する必要があります。

+0

... 'siblingings()'? –

+0

はい。 ** INGS **いくつかのjQueryを学んでみてください。なぜあなたは@RUJordanですか? ;-D – qwertynl

+0

ええ、それはあなたの兄弟のようなものです – iConnor

5
$(".showNextExperience").click(function() { 
    $(this).next().show(); 
});