現在のdivの外側にあるdiv内の要素へのアクセス

Question

これはおそらく非常に簡単な方法ですが、わかりません。

私のアプローチは、すべての<img>要素を、現在の「エントリ」の「img-preview」内にある「展開画像」クラスを持つようにすることです。

これは私のhtmlです：

<div class="entry"> 
<div class="img-preview"> 
    <img> 
    <img class="expanded-image" style="display:none;"> 
</div> 

<div class="content"> 
    [..] 
    [..] 
    <span class="more-text"></span> 
    [..] 
    [..] 
</div> 
</div> 

そして、これは私が一緒に仕事JSです：

$('.content').each(function(event) { 

    $(this).find('span.more-text').click(function(event) { 

     // TODO 

    }); 
}); 

Answer 1

まずあなたがすべてであなたがclick()イベントハンドラを適用することができますようeach()を必要としません単一のセレクタ内のすべての要素に渡します。

問題を解決するには、closest()を使用して、クリックした.more-textに最も近い親.entry要素を見つけることができます。そこからfind()すべての.expanded-image要素を使用できます。このお試しください：closest、prevとfind

$('span.more-text').click(function(event) { 
    $(this).closest('.content').prev().find('.expanded-image'); 
    }); 

Answer 2

$('.content').each(function(event) { 
    var $content = $(this); 

    $(this).find('span.more-text').click(function(event) { 

     $content.parent().find('.expanded-image'); // there you go 

    }); 
}); 

Answer 3

使用0の組み合わせをあなたは、セレクタで指定された親を見つけるまでバブルにclosest()を使用することができます。そこから、必要な要素までナビゲートすることができます。

$(this).closest('.entry').find('.img-preview .expanded-image'); 

また、Ronは、クリックイベントをループしてバインドしないでください。あなたは簡単に行うことができます

$('.entry .content .more-text').click(function(){ 
    $(this).closest('.entry').find('.img-preview .expanded-image'); 
}) 

Answer 4

の

$('.content span.more-text').click(function(event) { 
    var $imgs = $(this).closest('.entry').find('.img-preview .expanded-image'); 
    // work with $imgs here... 
});