2012-04-26 16 views
3

申し訳ありませんがタイトルが正確でない場合 - 私はそれをどのように言葉を理解することができませんでした。jQuery - 親の子要素の選択方法

私は同じクラス<div class="widget"></div>で複数のウィジェットを持っている - 各ウィジェットは、タイトルを持っており、内容は、このような構造:

<div class="widget"> 
    <div class="widget-title">Title</div> 
    <div class="widget-content">Content Here</div> 
</div> 

「ウィジェットコンテンツは、」隠されており、ウィジェットであなたをクリックすると、 -titleを指定すると、内容が表示され、クラスがwidget-titleに適用され、それを「widget-title open」に変更します。この部分はfindで動作し、widget-contentも開きます。

問題は、すべてのウィジェットでウィジェットコンテンツを開くことです。タイトルがクリックされた特定のウィジェット内のすべてのウィジェットではなく、ウィジェットコンテンツを開くだけです。私は正しい構文が何を使用するのか分からないので、ユーザがタイトルをクリックする特定のウィジェットのウィジェットコンテンツを開くだけです。ここで

は、これまで私が持っているコードです:

$('.widget').find('.widget-title').click(function() { 
    $('.widget-content').show('slow', function() { 
    // Animation complete. 
    }); 
    $('.widget').find('.widget-title').addClass("open"); 
}); 

は、誰かが作業例を提供していただけますか?おかげ

+1

あなたのHTML構造を投稿すれば、より具体的な回答が得られます。 – rgin

+0

私にとってもあまりにも遅いですが、ええ、コンセプトは、clickイベントでjQueryの貴重な '$(this)'を使用して、別のウィジェットとクリックしている実際のjQueryオブジェクトを区別することです。 –

答えて

15
$('.widget .widget-title').click(function() { 
    $(this) 
     .addClass("open") 
     .parent().find('.widget-content').show('slow', function() { 
      // Animation complete. 
     }); 
}); 
+0

それはうまくいきます、私を見せてくれてありがとう、私はこれを覚えています!私は$(this)関数を使う必要があるかもしれないと思ったが、どうしようもなかった!これは完璧です。 –

+3

ショーの前にクラスを開いているのはなぜですか?ショーのコールバックでaddクラスを行うのは、それが '開かれている'時点以降である方がよいでしょう。 –

+2

「子供」を使わないのはなぜですか?この場合、Find()は不要で、スクリプトの速度が遅くなります。 –

0

.children()http://api.jquery.com/children/

私はあなたを理解している場合、完全にわからないが、これはあなたを助けるかもしれません。

2

私はあなたがこれをしたいと思う:

$('.widget').find('.widget-title').click(function() { 
    $(this).parent().show('slow', function() { 
     // Animation complete. 
    }).addClass("open"); 
}); 

それは選択.widget-title要素の親を開きます。

+0

この回答は間違っています。すでに表示されているウィジェットではなく、ウィジェットのタイトルがクリックされたときに、コンテンツを表示したいと考えています。代わりにセレクタchildren()を使用する必要があります。 –

0
$('div.widget-title').click(function() { 
var el = $(this); 
el.addClass('open');siblings('div.widget-content').show('slow',function() { 
    //animation complete 
}); 
}); 

現在のDOM要素を指し、「この」キーワードを使用してコンテキストでコールバック関数を維持する必要があります。それ以外の場合は、コールバック内にwidget-titleのクラスを持つすべてのDOM要素を取得するだけです。

0

クラスで選択すると、jqueryはそのクラスのすべてのメンバーを選択します。この特定のウィジェットまたは親コンテナにIDまたは属性を設定することは可能ですか?

2

はこれを試してみてください:

$('.widget-title').click(function() { 
    $(this).parent('.widget').children('.widget-content').show('slow', function() { 
    $(this).addClass('open'); 
    }); 
}); 
1

私はここで、今日と同じ問題を抱えていた迅速な解決を $( '#親> childNodeが')でした。