Jquery 查找没有子元素的元素

我的目标：在悬停元素时更改元素的背景

问题是：我有一个

*

选择器，它将

mouseover/mouseout

效果添加到所有元素中。 但是，我只需要更改我悬停的最深元素的背景，即没有子元素的元素

$(function() {
    $('*').hover(function() {
        var that = $(this);
        while( that.contents().filter(function() { return this.nodeType == 1; }).length > 0 ) {
            that = that.contents().filter(function() { return this.nodeType == 1; });
        };
        that.css('backgroundColor', 'red');
    });
});

HTML:

Asdnjkewr



1。sdfsdf


fiweorew
您可以使用jQuery来实现：

$(elementBeingHovered).hover(function() {
    $(elementToChange).css("background-color", "red");
});

或者，如果悬停在要更改的同一元素上：

#to:hover {
    background-color: red;
}

我不太确定我是否完全抓住了你的目标和意图，但以下内容可能会有所帮助，特别是在确定任何悬停元素的最深元素时

方法
.contents（）
返回所有子级，包括
textNodes
（nodeType=3）。当只有textnode子节点时，while循环停止

$(function() {
    $('*').hover(function() {
        var that = $(this);
        while( that.contents().filter(function() { return this.nodeType == 1; }).length > 0 ) {
            that = that.contents().filter(function() { return this.nodeType == 1; });
        };
        that.css('backgroundColor', 'red');
    });
});


我希望这能帮助您实现目标。
您可以利用事件委派，将单击处理程序绑定到
文档，而不是将处理程序绑定到每个元素。（这还具有处理动态添加的元素的附加优势。）

由于
文本节点
，注释中提到的选择器将不适用于
、
等元素。您可以使用方法来检查实际的子元素，如下所示：

$(document).on('mouseenter','*',function(){
 if(!$(this).children().length)
   $(this).addClass('highlight');
});
$(document).on('mouseleave','*',function(){
 if($(this).hasClass('highlight'))
   $(this).removeClass('highlight');
});

CSS

将所有内容都作为解析的目标很少是个好主意。创建需要附加函数的元素列表<代码>$（'.one.thing.one.thing.a>p'）…
如何定位没有子元素的元素（
：empty
）@伊舍伍德的问题是，我希望这是一个概括。我想在allow中使用表示他想要的值的元素。@GriffeyDog您可能是对的！我第一次评论是错的。@GriffeyDog你是对的！这是正确的答案。我可能想用悬停代替鼠标悬停。但是，我不知道悬停的元素。上面的元素是否使用悬停？如果您只想在其他元素悬停时更改一个元素，您仍然可以使用上面的jQuery，只需使用$（“*”）作为选择器；虽然，正如其他人所说，这通常不是好的做法。
.highlight{
  background-color:dodgerblue;
}