jquery - jQuery-親の子要素を選択する方法は？

Question

タイトルが正確でない場合は申し訳ありません-私はそれを表現する方法を理解できませんでした。

同じクラスのウィジェットが複数あります。<div class="widget"></div>各ウィジェットには、次のように構造化されたタイトルとコンテンツがあります。

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

「widget-content」は非表示になり、widget-titleをクリックするとコンテンツが表示され、widget-titleにクラスが適用され、「widget-titleopen」に変更されます。この部分は検索で機能し、ウィジェットコンテンツも開きます。

問題は、すべてのウィジェットでウィジェットのコンテンツを開くことです。タイトルがクリックされた特定のウィジェットのウィジェットコンテンツのみを開く必要があり、すべてを開く必要はありません。使用する適切な構文がわからないため、ユーザーがタイトルをクリックした特定のウィジェットのウィジェットコンテンツのみが開きます。

これが私がこれまでに持っているコードです：

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

誰かが実用的な例を提供してもらえますか？ありがとう

score 19 · Accepted Answer

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

score 2 · Accepted Answer

私はあなたがこれを望んでいると思います：

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

.widget-title選択した要素の親を開きます。

score 2 · Accepted Answer

これを試して：

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

score 1 · Accepted Answer

今日も同じ問題がありました。簡単な解決策があります$（'＃parent> childNode'）; http://api.jquery.com/child-selector/

score 0 · Accepted Answer

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

現在のDOM要素を参照する「this」キーワードを使用して、コールバック関数をコンテキスト内に保持する必要があります。それ以外の場合は、コールバック内のウィジェットタイトルのクラスですべてのDOM要素を取得するだけです。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

jquery - jQuery-親の子要素を選択する方法は？

7 に答える 7

Related

Reference