如何用jQuery在每个元素中选择子元素？

我开始在jQuery中。即时尝试创建一个工具提示。我有一些像流动代码：如何用jQuery在每个元素中选择子元素？

<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>

我要显示在当鼠标进入每个.item元素中的每个元素.item DIV .tooltip。我写的代码流，以做到这一点：

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

但是当我移动鼠标在每个项目上，显示的所有.tooltip。

我该如何解决这个问题..？！

TNX

来源

2014-02-09 Mohsen Rasouli

'$（'。tooltip'）'选择'$（'。tooltip'）''的所有实例，选择***相关*** '$（'。tooltip'）'在问题中，这通常由'$（this）'选择，其范围为当前项目。 – MackieeE

你应该试试这个（.find()将搜索元素在当前元素用$(this)选择）：

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

或本：

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

来源

2014-02-09 14:19:33 Codel

$（'。tooltip'，this）.show（）也适用，稍微简化版本 – Bryan

是的，我想到了这一点，并编辑了另一个解决方案。 – Codel

this的事件处理中是指在其鼠标进入当前item元素，所以使用this随着.find()

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

来源

2014-02-09 14:19:13

@downvoter我是否错过任何东西 –

你可以使用.find（）或。孩子（）relativly为$（本）

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

或

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

其中$（本） = $（'。item'）相对于$（'。view-port'）

来源

2014-02-09 14:23:21

如何用jQuery在每个元素中选择子元素？

回答

相关问题