使用jQuery选择元素或第一个匹配的父项

我想要将覆盖图应用于要悬停的元素（如果匹配某些条件），或者如果匹配条件（如果不匹配），则将其应用于第一个父级。使用jQuery选择元素或第一个匹配的父项

考虑下面的示例HTML和假设我要覆盖应用到任何元素与类“匹配”：

<div class='matches'> 
    some Text <span>some more text</span> 
</div>

我想，如果用户将鼠标悬停在“一些文本”的它在哪里叠加应用于div，如果他们将鼠标悬停在“更多文本”上，叠加层也应用于div，因为这是第一个包含“匹配”类的父项。

我能想到做到这一点的唯一方法就是观察每个看起来效率非常低的单个元素上的悬停事件。这样做可以吗，还是有更好的方法来做到这一点？

来源

2013-07-18 NorthFork

~~这应该工作~~

~~$('.matches').on('mouseenter', function(e) { // $(this) is .matches element })~~

~~编辑 - 原来是过于复杂。 $(this)应该是你想要的元素。~~

发布了提问者的解决方案在这里更容易找到：

http://jsfiddle.net/swwh8/1/

$('.matches').hover(function(e) { 
    $('.matches').removeClass('highlight'); 
    $(this).addClass('highlight'); 
    e.stopPropagation(); 
}, function (e) { 
    $(this).removeClass('highlight'); 
    $(this).parent().closest('.matches').addClass('highlight'); 
});

来源

2013-07-18 22:00:26

我尝试这样做，我有麻烦得到它的工作，因为我想。看看我上面的例子，让我们说span标签还包含了matches类。在这种情况下，作为用户对“某些文本”的超越，我希望div突出显示。当他们在'一些更多的文本'上悬停时，我想突出显示从div中移除并应用于跨度。在测试时，当我进入跨度时，我似乎从未收到任何事件。那有意义吗？ – NorthFork

我这么认为。看看这个：http://jsfiddle.net/swwh8/。如果我明白你想要什么，那个小提琴不太对，但它很接近。它适用于从外部元素到内部元素，而不是其他方式，因为当你从内部元素移动到外部时，外部元素上的mouseover不会触发，因为从技术上讲，当你徘徊时内在的元素，你也徘徊在外部的元素。 –

我想你明白了这个问题，并且非常了解它。你是对的，我也想捕获它离开孩子并回到父母的时候。我在你的示例中添加了一行，它完美地工作（至少在这个超级简单的场景中）。对于需要更新的任何人，您可以在这里http://jsfiddle.net/swwh8/1/谢谢！ – NorthFork

使用jQuery选择元素或第一个匹配的父项

回答

相关问题