2012-04-20 27 views
2

に一つの要素をslidedown:jQueryの私はこのようなdiv要素を持っているのdiv

<div> 
    <font class='slideclick'>Click here to slidedown dynamic content</font> 
    <div class='slidedownonclick'> This is the content that slides down </div> 
</div> 

jQueryが 'slideclick' がクリックされたときにslidedownする 'slidedownonclick' をトリガーします。これは素晴らしいですが、私はこれらのdivの同じWebページで、mysqlデータベースからrecuringの不定な量を持っています。一意のIDを与えることは不可能です。クリックしたときに、スライダダウンにそれぞれの「スライデリック」と同じdivに「スライダダウン・クローン」しか得られないような方法はありますか?

すべてのヘルプは非常にあなたとその兄弟を見つけるだろう、

おかげで、.slideclickハンドラに

答えて

1

をいただければ幸いです。

$(this).find('+ .slidedownonclick'); 

か:

$(this).next('.slidedownonclick'); 
1

この意志の場合は、次の.slidedownonclick divにスライドします。がクリックされる:jQuery.next()について

$('.slideclick').click(function() { 
    $(this).next('.slidedownonclick').slideDown(); 
}); 
+0

まで、それはこの使用しているもののjQueryのバージョン、私のために働いていませんか? ? –

+0

これはかなり新しいバージョンのjQueryで動作するはずです。これらの要素は動的に追加されていますか? '.slideclick'の次の子に' .slidedownonclick'があるのでしょうか?その間に要素がありますか? – Bojangles

0
$('.slideclick').click(function() { 
$(this).next('.slidedownonclick').animate({ 
    height: '+=50' 
    }, 1000); 
}); 
0

チェックを、それはあなたがしたい仕事です。
これを使用すると、class/idがセレクタである次のシブリングを得ることができます。
EDITED:

は、jQueryの1.6.4

jQuery(document).delegate('font.slideclick', 'click', function() { 
     jQuery(this).next('slidedownonclick').slideToggle(); 
    }); 

jQueryの1.7 +

jQuery(document).on('click', 'font.slideclick', function() { 
    jQuery(this).next('slidedownonclick').slideToggle(); 
}); 
+0

'.live()'は推奨されていません。おそらくネイティブ '.click()'や '.on()'を使うべきでしょう。 –

+0

彼が使用しているjqueryのバージョンによって異なります。 –

+0

正しいですが、それでも['.live()'](http://api.jquery.com/live/)は次のように述べています: 'jQuery 1.7以降、.live()メソッドは非推奨です。 .on()を使用してイベントハンドラをアタッチします。 jQueryの古いバージョンのユーザーは、.live()に優先して.delegate()を使用する必要があります。 –