Как выбрать дочерний элемент в каждом элементе с помощью jQuery?

Question

Я начинаю в jQuery. im попытайтесь создать подсказку. У меня есть что-то вроде протекающего код:

<div class="view-port"> 
    <div class="item"> 
     <a href="#" class="item-link"><img src="product"></a> 
     <div class="tooltip">some description</div> 
    </div> 
    <div class="item"> 
     <a href="#" class="item-link"><img src="product"></a> 
     <div class="tooltip">some description</div> 
    </div> 
    <div class="item"> 
     <a href="#" class="item-link"><img src="product"></a> 
     <div class="tooltip">some description</div> 
    </div> 
    <div class="item"> 
     <a href="#" class="item-link"><img src="product"></a> 
     <div class="tooltip">some description</div> 
    </div> 
</div> 

я хочу показать .tooltip DIV в каждом элементе .item, когда мышь ввести каждый .item элемент. я написал протекающий код, чтобы сделать это:

$('.view-port').on('mouseenter', '.item', function(e){    
    $(' .tooltip').show(); 
}); 

но когда я перемещать мышь по каждому пункту, все .tooltip показано на рисунке.

как я могу исправить это ..?!

TNX

Answer 1

Вы должны попробовать это (.find() будет искать элемент в текущий элемент, выбранный с помощью $(this)):

$('.view-port').on('mouseenter', '.item', function(e){    
    $(this).find('.tooltip').show(); 
}); 

или это:

$('.view-port').on('mouseenter', '.item', function(e){    
    $('.tooltip', this).show() 
}); 

Answer 2

this внутри обработчика событий относится к текущему item элемента, на который вошли мыши, так что используйте this вместе с .find()

$('.view-port').on('mouseenter', '.item', function(e){    
    $(this).find('.tooltip').show(); 
}); 

Answer 3

Вы можете использовать .find() или .children() relativly до $ (это)

$('.view-port').on('mouseenter', '.item', function(e){    
    $(this).find('.tooltip').show(); 
}); 

или

$('.view-port').on('mouseenter', '.item', function(e){    
    $(this).children('.tooltip').show(); 
}); 

Где $ (это) = $ ('. item') relativly to $ ('. view-port')