使用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選擇元素或第一個匹配的父項

回答

相關問題