javascript - 姉妹要素を見つける

Question

<div class="videoItem">
    <div class="innerVideoItem">
         <a><div class="overlayBg"></div></a>
         <a><img class="overlayPlay"><img></a>
    </div>
</div>
<script>
    $(".overlayPlay").hover(function(){
          // How do I find overlayBg here?
    });
</script>

を使用せずに .overlayBg にアクセスするにはどうすればよい$(".overlayBg")ですか?

Answer 1

マークアップではoverlayBg、 andは兄弟ではなく、いとこであり、 andメソッドoverlayPlayを使用できます。closestfind

$(".overlayPlay").hover(function(){
    $(this).closest('.innerVideoItem').find('.overlayBg');
    // $(this).parent().prev().find('.overlayBg')
});

Answer 2

ネイティブ JavaScript で前の要素を取得する方法は (イベント ハンドラ内で):

this.parentElement.previousElementSibling.firstElementChild

Answer 3

ということですか:

 $(".overlayPlay").hover(function(){
      $(this).parents("div.innerVideoItem").find("div.overlayBg");
 });