web-dev-qa-db-fra.com

jQuery, recherche si l'élément a du texte

Je m'occupe de certaines plages générées et je voudrais trouver celle qui ne contient aucun texte.

Le balisage est:

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

Je peux obtenir ceux qui ont "du texte" avec ce code mais je ne peux pas obtenir ceux qui sont vides:

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

Comment récupérer les vides? Je pense à utiliser .length pour le faire mais je n'y suis pas parvenu.

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

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

Évidemment, au lieu d'ajouter une classe, vous pouvez faire ce que vous voulez, renvoyez l'objet, etc.

MISE À JOUR: Suppression du caractère caché étrange après le point-virgule final qui a provoqué l'erreur js.

51
Alex
$('span:empty').css('background-color','red');
9
luminancedesign

Utilisez filter pour filtrer les éléments qui n'ont pas de contenu textuel:

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

je ne connais pas un tel sélecteur, mais il est facile d'écrire

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

puis, par exemple

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

juste pour le bénéfice des googleurs, voici la version étendue. $ ("node: matches (/ regexp /)") sélectionne les nœuds dont le contenu texte correspond à l'expression rationnelle donnée.

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

démo:

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