Question

我需要选择没有子节点的元素（包括文本，因为在<p>文本中是子节点）。

我使用empty，但它也将空间视为子节点。

示例：

标记：

 <span> </span>
 <span></span>

脚本：

$("span:empty").html("this was empty!");

不幸的是，只有第二个元素被选中和更改，因为第一个元素有空格而且被认为是子节点。

如何选择没有子节点的元素？我想把空间视为一无所有。我希望代码不要使用循环来选择它们，可能还有其他方法。

Answer 1

怎么样

$("span:not(:has(*))")

选择所有没有子节点的跨度。

<强>解释

:has()选择器“选择包含至少一个与指定选择器匹配的元素的元素。”通配符*表示所有元素。

如果存在$('div:has(p)')，则表达式<div>与<p>匹配在其后代中的任何地方，而不仅仅是一个直接的孩子。

:not()选择器“选择与给定选择器不匹配的所有元素。”

在这种情况下，:has()选择所有内容，然后我们使用:not()查找与“所有内容”不匹配的元素...换句话说，没有。

Demo

Answer 2

$.expr[":"]["no-children"] = function( elem ) {
    return !elem.firstChild || !$.trim(""+ elem.firstChild.nodeValue);
};
$("span:no-children").html("this was empty");

http://jsfiddle.net/k5eTS/6/

jQuery的$.trim有一个令人惊讶的“功能”，可以在我期待null的同时将""转换为"null"。手动转换为字符串可修复此问题。

Answer 3

我想你可以试试这个：

$('span').filter(function() {
   return !this.innerHTML.replace(/\s/g,'').length;
});

<强> DEMO

Answer 4

试试这个

$("span").each(function(){
if($(this).text().trim()=='')
$(this).text('Empty');
});

如果您不喜欢每个功能，那么

$("span").html(function(){
if($(this).text().trim()=='')
return 'Empty';
});

在jQuery中获取没有子节点的所有元素

4 个答案: