如何获取没有子元素但可能有文本的元素？

Question

空选择器 表示：匹配所有没有子元素（包括文本节点）的元素。
查找所有为空的元素 - 它们没有子元素或文本。

我想要获取那些没有子元素但可能包含文本的元素，怎么做呢？

更新：
例如：
我想选择那些没有子元素但可能包含文本的元素，用这样的语法：

$('div:empty, a:empty, span, p:empty, td:empty, img, input').mousemove(myMouseOverHandler);

- Amr Elgarhy

Answer 1

获取没有其他元素的任何元素:

$('*:not(:has(*))');

- Borgar

---

值得一提的是，这种情况并不适用于反过来的方式：“*:has(:not(*))”由于某些内部原因而失败。 - Borgar

如果你考虑一下CSS选择器引擎可能如何尝试解释选择器，这就有些合理了。has不需要知道如何处理not。更好的是，not(*)到底意味着什么？它将如何转化为我们想要的内容？无论如何，这个答案非常棒，因为它救了我一命。 - Steven Lu

这个有类似的 CSS 选择器吗？ - Johan Aspeling

Answer 2

如果一个元素只有文本，children() 的长度将为 0：

<div id="test1">
Hello World
</div>

<div id="test2">
<b>Hey there</b>
</div>

<script>
alert($("#test1").children().length); // alerts 0
alert($("#test2").children().length); // alerts 1 (the bold tag)
</script>

编辑：根据您的编辑，jQuery非常棒，可以让您创建自定义过滤器：

$.expr[':'].emptyOrText = function(e) {  
    return $(e).children().length == 0;
};

因此，使用上述代码对上面的HTML进行操作，您可以执行以下操作：

$('div:emptyOrText'); // will select #test1

- Paolo Bergantino

---

我猜他正在寻找类似于“：only-text”选择器的东西。children()方法只有在你有id的情况下才有帮助。 - kgiannakakis

很好的定制选择器！不过不需要使用“extend”方法 - 只需执行jQuery.expr[':].emptyOrText = function(){...}即可。 - James

另外，0 转换为 false 并且尝试访问 [0] 比 'length' 更短 - ... 因此，您可以只需执行 'return !$(e).children()[0]'。 - James

啊，我不确定自定义选择器的语法，这个更短。谢谢。至于长度，我有点喜欢它的长度，因为它读起来更好，后来遇到它的人可以更容易地理解它，我想。 - Paolo Bergantino

不错的回答，Paolo...这超出了当前问题。我知道我将来会回来解决问题。 - Jay Corbett

Answer 3

我写了一个纯JavaScript函数，适用于不想使用jQuery的人。

const getElementsWithNoChildren = (target) => {
    let candidates;

    if (target && typeof target.querySelectorAll === 'function') {
        candidates = target.querySelectorAll('*');
    }
    else if (target && typeof target.length === 'number') {
        candidates = target;
    }
    else {
        candidates = document.querySelectorAll('*');
    }

    return Array.from(candidates).filter((elem) => {
        return elem.children.length === 0;
    });
};

- Seth Holladay