jQuery,查找元素是否有任何文本

时间:2010-03-04 10:53:52

标签: jquery text

我正在处理一些生成的跨度,我想找到哪一个不包含任何文本。

标记是:

<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>

我可以使用此代码获取具有“一些文本”的内容,但我无法获得空代码:

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

如何获得空的?我正在考虑使用.length来做,但我没有管理。

4 个答案:

答案 0 :(得分:49)

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

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

显然,您可以根据需要添加类,而不是添加类,返回对象等

更新:在最终分号后删除了导致js错误的奇怪隐藏字符。

答案 1 :(得分:9)

使用filter过滤那些没有文字内容的元素:

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

答案 2 :(得分:9)

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

答案 3 :(得分:5)

我不知道这样的选择器,但写起来很容易

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 /)”)选择文本内容与给定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>