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

AJDev 发表于 Dev

荞麦

<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>代替，而不是＃page-content中包含<ul>的<a>标记。

赫克托·巴尔博萨（Hector Barbossa）

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。