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

jQuery: If element is empty excluding whitespace and comments

本文关键字：不包括 空格 注释 如果 元素 jQuery      更新时间：2023-09-26

下面的代码检查元素中是否没有内容（不包括空格或换行符）。除了忽略空格之外，如果可能的话，我还希望它忽略注释或任何不是 HTML 标签的内容。我怎样才能做到这一点？

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

根据您的评论：

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

要确定元素是否包含不包括注释的节点，请使用 .children（）。

要确定元素是否包含除空格以外的文本内容，请将 $.trim（） 与 .text（） 一起使用。

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

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

因为非零数是真实的，而空字符串是假的，所以可以缩短为：

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（） 与 .content（） 有何不同可能会有所帮助，.content（） 确实包括注释节点和文本节点：

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>

可以使用

元素的 textContent 属性。

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

请参阅示例代码：

$(document).ready(function(){
  alert("DIV1: " + $.trim( $("#div1").text()) );
  alert("DIV2:" + $.trim( $("#div2").text()) );
});
<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>

相关文章：