循环遍历 div 并检查子 div 是不是有内容

Posted 2023-03-16

【中文标题】循环遍历 div 并检查子 div 是不是有内容

【英文标题】：Loop Through Divs and Check If Child Div Has Content循环遍历 div 并检查子 div 是否有内容

【发布时间】：2016-10-24 19:55:27

【问题描述】：

我正在寻找循环遍历 div，检查每个在其特定子 div 中是否有内容，如果有，则向 div 添加一个类。

  $('.img-banner').each(function( index, element ) 
    if ( $(element).find('.img-banner-content').length > 0 ) 
      $(element).addClass("has-content");
    
  );

我在这里遗漏了一些简单的东西，可以通过摇晃来完成。问题是它将类“has-content”添加到所有 div。

精简测试用例：JSFiddle

谢谢大家。

【问题讨论】：

您在这里唯一的测试是检查父div 中是否有一个或多个divs。没有任何东西检查他们的内容。

How do I check if an html element is empty using jQuery?的可能重复

【参考方案1】：

您需要实际检查 div 中是否有文本。

$(this).find('.img-banner-content').length 将始终返回 true，因为它实际上并不检查该 dom 节点是否有任何 innerHTML，只是检查 dom-ref 是否存在。

所以替换：

if ( $(this).find('.img-banner-content').length > 0 )

与：

if ( $(element).find('.img-banner-content').text().length > 0 )

把它放在一起：

$(document).ready(function () 
  $('.img-banner').each(function( index, element ) 
    if ( $(element).find('.img-banner-content').text().length > 0 ) 
      $(element).addClass("has-content");
    
  );
);

https://jsfiddle.net/jg0w257q/

【讨论】：

或者，为了获得更大的灵活性，请使用.html()。也可以使用$.trim() 操作。

@4castle 好点，但我不确定最初的意图是否只是检查 div 中是否有文本，或者那里实际上是否有一堆 dom 节点和东西跨度>

@Jonathan.Brink 不，这是完美的。正是我想要的。谢谢你打破了。我想检查 div 中是否有文本。