过滤元素并仅选择带有文本的元素答案

【问题标题】：Filter through elements and only select elements with text过滤元素并仅选择带有文本的元素
【发布时间】：2016-10-10 20:20:14
【问题描述】：

<div id="page-content">
  <ul>
   <li>Text</li>
   <li>Text 2 </li>
  </ul
  <div class="heading">
    <h2>Heading</h2>
  </div>
</div>

我以上面的 HTML 代码为例。我想过滤每个元素，只向带有文本的元素添加一个类。我在下面得到了一些 jQuery：

$(document).ready(function(){
  $('#page-content').find('*').each(function(){
    if ($(this).text().trim().length){
      $(this).addClass('yay');
    }
  });
});

代码在 page-content 元素中查找每个项目并检查它是否有文本并添加类“yay”。这确实有效，但是如果其子元素中有文本，它将为父元素提供类。例如。它将给 <ul> 类，因为 <li> 有文本。

我正在使用的代码是否有问题，或者我需要使用完全不同的脚本来仅将类应用于带有文本的元素？

注意 HTML 已生成，因此我最终可能会得到 <ol> 而不是 <ul>，或者包含在 #page-content 中的 <a> 标记。

【问题讨论】：

是否会被添加到所有的 li 标签和 h2 标签中？
目前'yay'被添加到'page-content'下的每个元素中，但我只想将它添加到'li'和'h2'中。看看我在问题中的注释。我即将添加它

标签： javascript jquery html

【解决方案1】：

您可以修改代码以检查该元素是否有任何子元素，并且仅当这是一个文本节点时才添加该类。但是如果 HTML 格式不正确，这可能会导致问题。

$(document).ready(function() {
      $('#page-content').find('*').each(function() {
          if ($(this).children().length == 0 && $(this).text().trim().length) {
              $(this).addClass('yay');
          }
      });
  });

【讨论】：