javascript - 筛选元素，仅选择带有文本的元素

<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>，或者一个包含在页面内容中的<a>标记。

最佳答案

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

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

关于javascript - 筛选元素，仅选择带有文本的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37738511/