Получить все элементы без дочернего node в jQuery

Мне нужно выбрать элементы без дочернего node (включая текст, так как в <p> текст является дочерним node).

Я использовал empty, но также рассматривал пространство как дочерний node.

Пример:

Разметка:

 <span> </span>
 <span></span>

Script:

$("span:empty").html("this was empty!");

К сожалению, только второй элемент был выбран и изменен, поскольку первый элемент имеет пробел, и он считался дочерним node.

Как выбрать элементы без дочернего node? Я хочу рассматривать пространство как ничто. Предпочтительно, я хочу, чтобы код не использовал цикл для их выбора, могут быть другие способы.

Ответ 1

Как насчет

$("span:not(:has(*))")

Выбирает все промежутки, у которых нет детей.

Объяснение

:has() selector "выбирает элементы, которые содержат по крайней мере один элемент, соответствующий указанному селектору". Подстановочный знак * означает все элементы.

Выражение $('div:has(p)') соответствует <div>, если существует <p>где-то среди его потомков, а не только как прямой ребенок.

:not() selector "выбирает все элементы, которые не соответствуют данному селектору."

В этом случае :has() выбирает все, а затем мы используем :not() для поиска элементов, которые не соответствуют "всем"... другими словами, ничего.

Демо

Ответ 2

$.expr[":"]["no-children"] = function( elem ) {
    return !elem.firstChild || !$.trim(""+ elem.firstChild.nodeValue);
};
$("span:no-children").html("this was empty");

http://jsfiddle.net/k5eTS/6/

Была неожиданная "функция" с jQuery $.trim, которая преобразует null в "", пока я ожидал "null". Преобразование в строку вручную исправляет это.

Ответ 3

Я думаю, вы можете попробовать следующее:

$('span').filter(function() {
   return !this.innerHTML.replace(/\s/g,'').length;
});

DEMO

Ответ 4

Попробуйте это

$("span").each(function(){
if($(this).text().trim()=='')
$(this).text('Empty');
});

Если вам не нравится каждая функция, то

$("span").html(function(){
if($(this).text().trim()=='')
return 'Empty';
});