jquery - Jqueryで親divから子を選択する方法

Question

私は次のHTMLを持っています:

<div class="a">
    <div class="b"></div>
    <div class="x"></div>
    <div class="y"></div>
    <div class="c">
        <div class="d"></div>
    </div>
</div>

を呼び出すときに$(".d").click(function(){、div クラス .b を選択するにはどうすればよいですか? .bクラス名を使用せずに、これを相対的に行いたいと考えています。

score 1 · Accepted Answer

標準的なアプローチ:

$('.module').on('click', '.button', function () {
    $('.other', this)...
});

どこ：

.moduleページコンポーネントの最も外側の (ラッパー) 要素です。
.buttonリッスンしているクリックアクションを持つコンポーネント内の要素です。
.otherクリックハンドラ内で選択している要素です。

方法に注意してください:

イベント委任が使用され、
ハンドラー内のクエリはローカルであり、ページコンポーネントに制限されています。

また、他の回答が jQuery の要素の関係 (それらparent()とsibling()呼び出し) をハードコーディングしていることに注意してください。これは適切なアプローチではありません。

score 0 · Accepted Answer

$(".d").click(function(){
    $(this).parent().prev('div'); // or $(this).closest('.b'); 
});

OPのコメント後に更新

フィドルデモ

$(".d").click(function(){
    $(this).parent().parent().children().first();
});

参照

.最も近い()

。親（）

.prev()

score 0 · Accepted Answer

parent以前のものを見つける必要がありますsibling

$(".d").click(function(){
     $(this).parent().prev();
})

現在の親の前に 3 番目の兄弟を設定する場合は、prev() を 3 回追加するだけです。

$(".d").click(function(){
         $(this).parent().prev().prev().prev();
 })

score 0 · Accepted Answer

それらの相対位置が常に同じかどうかに依存します。

b が常に d の親の前の兄弟になる場合は、次のように選択できます。

$('.d').on('click', function(){
    var b = $(this).parent().prev();
});

b が常に d の親の親の最初の子になる場合:

$('.d').on('click', function(){
    var b = $(this).parent().parent().find(">:first-child");
});

score 0 · Accepted Answer

$(.d).click(function(){

$(this).parent().siblings('.b') //in this way
})

jquery の Web サイト http://api.jquery.com/category/selectors/を参照してください。

score 0 · Accepted Answer

$(".d").click(function(){
    alert($('div[class="a"]').children(":first").text());
});

これにより、クラス b の要素が選択されます。

ライブデモ

これも機能します

$(".d").click(function(){
    alert($(this).parent().parent().children(":first").text());
});

ライブデモ 2

これでも

$(".d").click(function(){
    alert($(this).parent().prev('div').text());
});

ライブデモ 3

jquery - Jqueryで親divから子を選択する方法

6 に答える 6

Related

Reference