查找没有子元素的元素答案

【问题标题】：Finding the elements with no children查找没有子元素的元素
【发布时间】：2014-08-14 00:09:50
【问题描述】：

我的目标：当悬停元素时改变元素的背景。

问题：我有一个* 选择器，它为所有元素添加了mouseover/mouseout 效果。但是，我只需要更改我悬停的最深元素的背景，即没有子元素的元素。

HTML：

<body>
    <div id="skinke" niveau="1">
        <img niveau="2" class="hest" id="dyr" src="http://upload.wikimedia.org/wikipedia/commons/d/db/Patern_test.jpg" />
    </div>
    <div class="bil hest" niveau="1">
        <p niveau="2">Asdnjkewr</p>
    </div>
    <ul niveau="1">
        <li class="aefae" niveau="2">
            <p id="bold" niveau="3">1. sdfsdf</p>
        </li>
        <li niveau="2">
            <p id="to" niveau="3">fiweorew</p> <---- I want only the <p> tag to change background
        </li>
        <li>
            <p class="re">werwerw</p>
        </li>
        <li>
            <p>wreer</p>
        </li>
    </ul>
</body>

为了澄清，我在上面添加了一条评论以帮助理解。

【问题讨论】：

将所有内容作为解析目标很少是一个好主意。创建您需要附加该函数的元素的列表。 $('.one-thing, .another .thing, .a > p')...
如何定位没有子元素的元素 (:empty)？ api.jquery.com/empty-selector
@isherwood 问题是，我希望这是一个概括。我想在allow中使用代表他想要的值的元素。
@GriffeyDog 你可能是对的！我的第一条评论错了。
@GriffeyDog 你说得对！这是正确的答案。

标签： jquery html dom jquery-selectors

【解决方案1】：

您可以利用事件委托并将点击处理程序绑定到document，而不是将处理程序绑定到每个元素。（这还具有处理动态添加元素的额外优势。）

由于textNodes，cmets 中提到的:empty 选择器不适用于<h1>、<p> 等元素。您可以使用 children() 方法来检查实际的子元素，如下所示：

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

CSS

.highlight{
  background-color:dodgerblue;
}

Demo

【讨论】：

【解决方案2】：

您可以为此使用 jQuery：

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

或者，如果您将鼠标悬停在要更改的相同元素上：

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

【讨论】：

我可能想使用悬停而不是鼠标悬停。但是，我不知道悬停的元素。
以上是否使用hover？如果您希望在所有其他元素悬停时只更改一个元素，您仍然可以使用上面的 jQuery，只需使用 $("*") 作为选择器；不过，就像其他人所说的那样，这通常不是一个好习惯。

【解决方案3】：

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

方法.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');
    });
});

JSFIDDLE DEMO

我希望这可以帮助您实现目标。

【讨论】：