jQuery, найдите, имеет ли элемент какой-либо текст
Я имею дело с некоторыми сгенерированными промежутками, и я хотел бы найти, какой из них не содержит текста.
Разметка:
<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 делать это, но я не справился.
3 ответа
$("span.col").each(function(){
if (!$(this).text().trim().length) {
$(this).addClass("foo");
}
});
http: // jsfiddle .net / cfgr9 / 1 /
Очевидно, что вместо добавления класса вы можете делать что угодно, возвращать объект и т. д.
ОБНОВЛЕНИЕ: Удален странный скрытый символ после последней точки с запятой, который вызывал ошибку js.
Мне не известен такой селектор, но легко написать
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")
, только для удобства гуглеров , вот расширенная версия. $ ("узел: соответствует (/ 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>
Используйте filter для фильтрации тех элементов, которые не имеют текстового содержания:
$('#layer6 > span.col').filter(function(){
return $(this).text().trim() != "";
}).length