Question

以下代码检查元素中是否没有内容（不包括空格或换行符）。除了忽略空格之外，我还希望它忽略评论或任何不是HTML标记的东西。我怎样才能做到这一点？

        if( $.trim( $("#element").html() ) == '' ) {
            // do something if empty
        }

Answer 1

根据您的评论：

我想检查元素是否包含任何节点，但不包含注释和空格。

要确定某个元素是否包含不包含评论的节点，请使用.children()。

要确定某个元素是否包含排除空格的文字内容，请将$.trim()与.text()一起使用。

结合这些，您的代码变为：

if($('#element').children().length>0 && $.trim($("#element").text())!=='')

因为非零数字是truthy而空字符串是falsy，所以可以缩短为：

if($('#element').children().length && !$.trim($("#element").text()))

在下面的示例中，element2是唯一符合条件的元素（仅具有空格的非注释节点）：

function test(el) {
  if($(el).children().length &&  !$.trim($(el).text())) {
    return 'Success - children with no visible text';
  }
  else {
    return 'Failure - '+
           $(el).children().length+' children -'+
           $(el).text();
  }
}

$('body').append('<p>element1: '+test('#element1')+'</p>');

$('body').append('<p>element2: '+test('#element2')+'</p>');

$('body').append('<p>element3: '+test('#element3')+'</p>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element1">
  Lorem ipsum
  <span>dolor</span>
  <!-- nothing to see here -->
  <strong>sit <em>amet</em></strong>
</div>

<div id="element2">
  <span> </span>
  <!-- nothing to see here -->
  <strong> <em> </em></strong>
</div>

<div id="element3">
  <!-- nothing to see here -->
</div>
<hr>

了解.children()与.contents()的区别，包含注释节点以及文本节点可能会提供信息：

constants='|element|attribute|text|cdata section|entity reference|entity|processing instruction|comment|document|document type|document fragment|notation'.split('|');

$('#info').children().each(function() {
  var t= $(this)[0];
  $('#children').append(
    '<tr><td>'+(t.tagName || '')+
        '<td>'+constants[t.nodeType]+
        '<td>'+(t.textContent.trim() || '<em>whitespace</em>')
  );
})

$('#info').contents().each(function() {
  var t= $(this)[0];
  $('#contents').append(
    '<tr><td>'+(t.tagName || '')+
        '<td>'+constants[t.nodeType]+
        '<td>'+(t.textContent.trim() || '<em>whitespace</em>')
  );
})

body, table {
  font: 12px verdana;
}

table {
  border: 1px solid #666;
  border-collapse: collapse;
}

td, th {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #bbb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="info">
  Lorem ipsum
  <span>dolor</span>
  <!-- nothing to see here -->
  <strong>sit <em>amet</em></strong>
</div>
<hr>
<strong>.children():</strong>
<table id="children">
  <tr><th>Tag<th>Node type<th>Text content
</table>
<hr>
<strong>.contents():</strong>
<table id="contents">
  <tr><th>Tag<th>Node type<th>Text content
</table>

Answer 2

您可以使用元素的textContent属性。

textContent属性设置或返回指定节点的文本内容及其所有后代。但是，评论不计算在内，因为它不是HTML标记。

参见示例代码：

＆＃13;

$(document).ready(function(){
  alert("DIV1: " + $.trim( $("#div1").text()) );
  alert("DIV2:" + $.trim( $("#div2").text()) );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> <!-- this div contains a comment --> </div>
<div id="div2">This div has <b>SOMETHING</b> inside</div>

＆＃13;

jQuery：如果元素为空，不包括空格和注释

2 个答案: