如何避免双重 jQuery 对象查找

Question

我正在开发一个 jQuery 悬停代码片段，它将在悬停时添加标记，然后使用该类。这里是JS。

$('.port-item').hover(function(){
        var $this = $(this);
        var name = $($this.find("img")).attr('title');
        $this.append('<div class="port-item-cover"><h3>' + name + '</h3><div>');
        $($this.children(".port-item-cover")).fadeIn();
    }, function(){
        $($(this).children(".port-item-cover")).fadeOut();
});

HTML 标记非常简单：

<div class="port-item">
   <a href="/portfolio/#/<?=$p['shortname']?>">
      <img src="images/portfolio/p_<?=$p['shortname']?>0.jpg" title="<?=$p['title']?>">
   </a>
</div> 

两个问题：主要的一个是，如何避免 jquery $($(this).children("#element")) 中的双重查找来查找当前范围内的子元素？第二个功能相当丑陋，有更好的方法吗？

第二个问题是，检查之前是否已将其悬停过以及标记是否存在的最佳方法是什么，因此我不会在后续悬停中添加它。

Answer 1

第一个很容易。您不需要外部 $ 调用。 .find() 将返回一个 jQuery 对象。就这样写

$(this).children("#element")

至于检测它之前是否已经悬停过，你必须在某个地方设置一个标志。这可能看起来像这样：

var hoveredOver = false;
$('.port-item').hover(function(){
    hoveredOver = true;
    //continue event handler
}

您可能需要根据您的具体情况来喜欢它。如果您将鼠标悬停在很多东西上，也许使用 .data() 设置标志会更好。

$('.port-item').hover(function(){
    $(this).data('hoveredOver', true);
    //continue event handler
}

编辑错过了一个问题。第三个答案：要判断 DOM 对象（标记）是否已经存在，您需要搜索它并检查长度，如下所示：

if($(this).find('#port-item-cover').length>0)
{
    //element exists
}
else
{
    //element does not exist, add it
}

Answer 2

1. 所有 jQuery 遍历方法都已返回 jQuery 对象；您永远不需要编写 $($this.children())。

2. 没有。

   a.如果没有 mouseenter，Mouseleave 永远不应该触发。

   b.如果没有任何匹配元素，则不会发生任何事情；您不会收到错误。

但是，您需要在动画结束后删除该元素；现在，您将在每次悬停时添加一个单独的元素。

请注意，您将 mouseenter 简化为

$('<div class="port-item-cover"><h3>' + name + '</h3><div>')
    .appendTo(this)
    .fadeIn();

Answer 3

对于第一个问题，请改用：

$(this).children("#element")