JQuery найти элемент

Question

У меня есть DIV как так:

<div class="country"> 
    <div class="cty_popover"> 
     <p>TITLE</p> 
     <ul> 
      <li>NAME 1</li> 
      <li>NAME 2</li> 
     </ul> 
    </div> 

    <img src="resources/images/map-marker.png" alt=" "> 
</div> 

И это JQuery:

$(document).ready(function(){ 
    $('.country img').hover(function() { 
     $(this).parents('.cty_popover').fadeIn(800); 
    }, 
    function() { 
     $('.cty_popover').fadeOut(300); 
    }); 
}); 

Я знаю, что эта линия является неправильным в JQuery:

$(this).find('.cty_popover').fadeIn(800); 

I необходимо указать:

.cty_popover 

из функции:

$('.country img').hover 

Так в основном мой вопрос:

Как таргетировать .cty_popover с помощью $(this)? Мне нужно перейти от «img», чтобы настроить его, но не знаете, как это сделать?

У меня есть много этих .cty_popover divs, и именно поэтому я хочу использовать $(this), поэтому я не нацеливаю их всех.

Любые идеи, почему я не могу заставить это работать?

Благодаря

Answer 1

Как img является родственный из cty_popover, вы можете ориентировать его с помощью функции prev() - посмотреть демо ниже:

$(document).ready(function() { 
 

 
    // hide all `cty_popover` sections initially 
 
    $('.cty_popover').hide(); 
 

 
    // hover listener 
 
    $('.country img').hover(function() { 
 
     $(this).prev('.cty_popover').fadeIn(800); 
 
    }, function() { 
 
     $(this).prev('.cty_popover').fadeOut(300); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="country"> 
 
    <div class="cty_popover"> 
 
    <p>TITLE</p> 
 
    <ul> 
 
     <li>NAME 1</li> 
 
     <li>NAME 2</li> 
 
    </ul> 
 
    </div> 
 
    <img src="http://placehold.it/200x200"> 
 
</div>

Answer 2

Поскольку img узел является родным братом cty_popover узел, заменив эту строку

$(this).parents('.cty_popover').fadeIn(800); 

с этим должны работать

$(this).siblings('.cty_popover').fadeIn(800); 

Here's В качестве примера

Answer 3

Вы должны использовать братьев и сестер: https://api.jquery.com/siblings/

Смотрите этот пример работает на вашем HTML :

$(document).ready(function(){ 
 
    $('.country').children('img').hover(function() { 
 
     $(this).siblings('.cty_popover').fadeIn(800); 
 
    }, 
 
    function() { 
 
     $('.cty_popover').fadeOut(300); 
 
    }); 
 
});

.country { 
 
    position. relative; 
 
    width: 300px; 
 
} 
 
.country > img { 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.country .cty_popover { 
 
    display: none; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
    background: rgba(255,255,0,.9); 
 
    padding: 5px; 
 
    border-radius: 5px; 
 
    width: 285px; 
 
} 
 
.country .cty_popover:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid rgba(255,255,0,.9); 
 
    position: absolute; 
 
    bottom: -20px; 
 
    left: 50%; 
 
    margin-left: -10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="country"> 
 
    <div class="cty_popover"> 
 
     <p>TITLE</p> 
 
     <ul> 
 
      <li>NAME 1</li> 
 
      <li>NAME 2</li> 
 
     </ul> 
 
    </div> 
 
    <img src="https://placeimg.com/300/200/tech" alt=" "> 
 
</div>