如何获得没有孩子但可能有文字的元素?

时间:2009-04-13 14:01:48

标签: javascript jquery html

empty selector表示:匹配所有没有子元素的元素(包括文本节点)。
查找所有空元素 - 它们没有子元素或文本。

我想要的是获得没有孩子但可能里面有文字的元素。怎么样?



更新:
例如:
我想选择这些没有孩子但可能有文字的元素,语法如下:

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

3 个答案:

答案 0 :(得分:27)

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

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

答案 1 :(得分:19)

如果元素只包含文字,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

答案 2 :(得分:4)

我为任何不想使用jQuery的人创建了一个纯JavaScript函数。

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;
    });
};