如何使用jQuery检测空的div？

Question

我不能使用：

$('div:empty')

因为div可能会有空格，如果它没有内容或只有空格，我想把它删除。

- user967451

Answer 1

这将返回所有没有文本内容（除了由.trim删除的空格或其他字符，如换行符）的div元素：

var emptyDivs = $("div").filter(function() {
    return $.trim($(this).text()) === "";
});

更新 - 基于评论

如果问题中的任何

元素具有不包含文本的子元素（例如，img元素），则上述方法将在“空”元素集合中包括它们。要排除它们，您可以使用以下方法：

var emptyDivs = $("div").filter(function() {
    return $.trim($(this).text()) === "" && $(this).children().length === 0;
});

- James Allardice

---

注意，如果您的 div 元素内有没有文本的元素（比如图片），使用这种方法会看起来是空的。我的答案解决了这个问题。 $.trim($("<div>").append($("<img>").attr("src", "test")).text()) - Alex Turpin

是的，没错。如果这是提问者的情况，我们的答案结合起来应该可以很好地解决问题！ - James Allardice

考虑到您的答案将是其他人寻找答案时看到的第一个答案，您是否考虑编辑您的帖子提到这个问题？ - Alex Turpin

已经在处理了 :) 并且对你的回答点赞。尽管空字符串和长度为0会强制转换为“false”，但我已经明确地检查了它们，以便更加清晰明了。 - James Allardice

Answer 2

基于 @Xeon06 的答案，您可以扩展 jQuery 的选择器来查找所有没有内容的元素：

$.expr[':'].nocontent = function(obj, index, meta, stack){
    // obj - is a current DOM element
    // index - the current loop index in stack
    // meta - meta data about your selector
    // stack - stack of all elements to loop

    // Return true to include current element
    // Return false to explude current element
    return !($.trim($(obj).text()).length) && !($(obj).children().length)
};

那么您的使用方式将会是：

$('div:nocontent').remove();

实时示例：http://jsfiddle.net/JNZtt/

- Jamiec

Answer 3

您可以使用此条件：

if (!$.trim($("div").text()).length && !$("div").children().length)

额外的children长度检查是为了确保您不会将没有文本但有其他元素（例如图像）的div视为为空。

- Alex Turpin

Answer 4

你可以像这样做：

$('div:empty').each(function(){
    if($.trim($(this).html()).length == 0){
        //do what you want here...
    }
});

- expertCode

Answer 5

if ($.trim($('div').html()) == '') { $("div").remove(); }

- Korvin Szanto