空div的jQuery选择器

Question

如何选择一个空的div和仅包含一个空格字符ej的div：

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');