jQuery，查找元素是否包含任何文本

Question

我正在处理一些生成的元素，我想找出其中哪一个不包含任何文本。

标记如下：

<span id="layer6">
    <span class="drag col">  Some text</span>
    <span class="drag col">  More text</span>
    <span class="drag col">  </span>
    <span class="drag col">  I also have text</span>
</span>

使用以下代码可以获取具有“some text”文本的项，但无法获取空项：

if ($('#layer6 > span.col:contains("some text")').length > 0) {
    alert ("I have text");
}

如何获取那些为空的元素？我想使用.length方法来实现，但我还没有成功。

- Mircea

Answer 1

$("span.col").each(function(){
    if (!$(this).text().trim().length) {
        $(this).addClass("foo");
    }
});

http://jsfiddle.net/cfgr9/1/

显然，你可以按照自己的意愿进行操作，比如返回对象等。

更新：删除了最后一个分号后面的奇怪隐藏字符，该字符会导致js错误。

- Alex

---

谢谢Alex，这个有效。在你的最后一个});​之后有一个非法字符，但我已经删除了它，现在它可以正常工作了。谢谢。 - Mircea

这是一个很好的解决方案，适用于例如CMS经常生成空标签<p>的情况。 - bobighorus

我一直在尝试使用$("span:empty")选择器，但没有成功。这个解决方案对我有用。+1 - Stefan Haberl

Answer 2

$('span:empty').css('background-color','red');

- luminancedesign

---

文档链接：https://api.jquery.com/empty-selector/ - Jens

Answer 3

使用filter过滤掉那些没有文本内容的元素：

$('#layer6 > span.col').filter(function(){
    return $(this).text().trim() != "";
}).length

- Gumbo

---

这应该可以工作，请让我尝试一下，然后我会发布结果。谢谢。 - Mircea

Answer 4

我不知道是否存在这样的选择器，但编写它很容易。

jQuery.expr[':'].empty = function(obj) { return jQuery(obj).text().replace(/^\s+|\s+$/, "").length == 0; }

jQuery.expr[':'].hasNoText = function(obj) {
    return jQuery.trim(jQuery(obj).text()).length == 0;
}

然后，例如。

$("#layer6 span:hasNoText").text("NEW TEXT")

为了方便谷歌用户，这里提供更详细的说明。$("node:matches(/regexp/)")选取文本内容匹配给定正则表达式的节点。

    <script>
    /// :matches(regexp)    
    /// regexp is like js regexp except that you should double all slashes
    jQuery.expr[':'].matches = function(obj, index, args) {
        var m = (args[3] + "").match(/^\/(.+?)\/(\w*)$/);
        var re = new RegExp(m[1], m[2]);
        return jQuery(obj).text().search(re) >= 0;
    }
    </script>

演示：

    <script>
    $(function() {
        $("div").click(function() {
            $("div:matches(/foobar/)").text("foobar was here")
            $("div:matches(/foo\\s+bar/i)").text("some text")
            $("div:matches(/^\\s+$/)").text("only spaces")
        });
    });
    </script>

    html before 

    <div>foobar</div>
    <div>Foo Bar</div>
    <div>       </div>

    html after 

    <div>foobar was here</div>
    <div>some text</div>
    <div>only spaces</div>

- user187291

---

谢谢您的建议，我会尝试并告诉您结果。 - Mircea

:empty 获取绝对没有文本或内容的元素。在我的情况下，我在两个 span 之间有 2 个空格： <span class="drag col"> </span> - Mircea