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

Question

我需要选择没有子节点的元素(包括文本,因为在<p>文本中是子节点).

我用过empty,但它也将空间视为子节点.

例:

标记:

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

脚本:

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

不幸的是,只有第二个元素被选中和更改,因为第一个元素有空格,它被认为是子节点.

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

Answer 1

怎么样

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

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

说明

所述:has()选择器"选择哪个包含指定的选择器相匹配的至少一种元素的元素." 通配符*表示所有元素.

表达式$('div:has(p)')匹配<div>if <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");

​

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

有一个惊人的"功能"与jQuery的$.trim转换null到""我期待的时候"null".手动转换为字符串可以解决此问题.