循环遍历 Div 并检查子 Div 是否有内容

Question

我希望循环遍历 div，检查每个 div 的特定子 div 中是否有内容，如果有，则向 div 添加一个类。

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

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

减少测试用例：JSFiddle

谢谢大家。

Answer 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/