jquery - 空 div 的 Jquery 选择器

Question

如何选择一个空的 div 和只有一个空格字符的 div，ej：

Ej：一个选择这个的 jquery 规则选择器：

<div class="thumbnails"></div>
<div class="thumbnails"> </div>

但不选择这个：

<div class="thumbnails">Lorem ipsum amet</div>

---

我试过这个

$('.thumbnails:empty').css('background-color', "#f0f");

并且适用于：

<div class="thumbnails"></div>

但不选择这种情况（注意空格字符）：

<div class="thumbnails"> </div>

测试：http: //jsbin.com/ozohak/1/edit

Answer 1

使用过滤功能检测没有文字的元素

$('.thumbnails').filter(function(i,v){
    return $.trim($(v).text()).length == 0;
}).css('background-color', "#f0f");

http://jsbin.com/ozohak/5/edit

编辑：

如果需要，您也可以使用过滤器功能选择空元素和一个空格

$('.thumbnails').filter(function(i,v){
    return $(v).text() == '' || $(v).text() == ' ';
}).css('background-color', "#f0f");

http://jsbin.com/ozohak/10/edit

Answer 2

您可以编写自己的 Jquery 选择器，并检查修剪后的文本（参见http://jsbin.com/ozohak/12/edit）

$.expr[':'].blank = function(obj){
  return obj.innerHTML.trim().length === 0;
};

$('.thumbnails:blank').addClass('selected');

编辑：为避免 IE8 及更低版本中的问题：

$.expr[':'].blank = function(obj){
  return !$.trim($(obj).text()).length;
};

$('.thumbnails:blank').addClass('selected');

Answer 3

您可以将 afilter()与正则表达式一起使用以确保text()为空：

$('.thumbnails')
    .filter(function() {
        return $(this).text().replace(/\W/gi, '') == '';
    })
    .addClass('selected');

更新示例

html()请注意，如果您想在 div 中允许 HTML 元素，您也可以进行比较。

Answer 4

没有选择器可以检查空白内容，但这里有一些可能会有所帮助：

$('div').each(function(i,e) {
  if ($(e).html().trim() == "")
    $(e).html("");
});

$('.thumbnails:empty').addClass('selected');

问候。

Answer 5

您可以使用以下代码

$('*').each(function() {
         if ($(this).text() == "") { // you can change this to whatever #ex: char length
                   //Do Something
         }
});