循环遍历 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?的可能重复

标签： jquery if-statement each addclass

【解决方案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 中是否有文本。