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

Question

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

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

例子：

标记：

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

脚本：

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

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

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

Answer 1

怎么样

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

选择没有孩子的所有跨度。

解释

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

如果 a存在于其后代中的任何位置，则表达式$('div:has(p)')匹配 a ，而不仅仅是直接子代。<div><p>

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

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

演示

Answer 2

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

​</p>

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

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

Answer 3

我想你可以试试这个：

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

演示

Answer 4

试试这个

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

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

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