Question

<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已生成，因此我最终可能会在＃page-content中包含<ol>而不是<ul>或<a>标记

Answer 1

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

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

过滤元素，只选择带文字的元素

1 个答案: