jQuery：获取具有隐藏子项的自定义属性的元素，添加实时悬停功能

Question

我希望获得具有特定属性的所有元素，并且具有隐藏的特定类型的子元素。为此，我编写了这个选择器：

$("*[custom-attr]:has('span:hidden')")

除此之外，我想在悬停时添加一个实时功能。例如：

$("*[custom-attr]:has('span:hidden')").live("hover", function() { /* do something */ });

我认为这是正常的，因为我得到了我想要的视觉效果。然而，当使用Firebug时，我注意到它可能并不完美。当在体内移动鼠标时，即使没有悬停满足选择的元素，Firebug也会指示悬停的HTML元素会受到影响（它们在Firebug HTML选项卡中显示为黄色）。见附图：

为什么会这样，我该如何避免呢？

我注意到类似的选择器没有导致相同的行为，比如这个没有span子元素的元素：

$("*[custom-attr]:not(:has('span'))").live("hover", function() { /* do something */ });

感谢。

Answer 1

既然你得到了你所期待的视觉效果，那听起来就像它在起作用。我认为Firebug只是突出显示最近有一些变化的元素，或者如果在屏幕截图中的HTML视图中折叠，那么它的子节点之间就会出现问题。这种突出显示将在例如属性是改变的，并且当例如恢复改变时mouseleave，突然显示将在更改发生后停留一段时间。

也就是说，正如Kartikeya在评论中提到的那样，将.live()（已弃用）更改为.on()也是一个好主意。

Answer 2

尝试使用自然浏览器选择器，这样可以避免jQuery添加临时属性。对于您的情况，您可以使用：{/ p>而不是has()

$("[custom-attr]").on("mouseenter", function() {
    if ( $(this).find('span:hidden').length ) {
        /* your code */
    };
});