如何用jQuery遍历父div子元素，判断全部display为none时提示消息

你的需求是当.test1下所有.test2子div都隐藏（display:none）时显示提示消息，但原代码逻辑有误：遍历每个.test2时，只要当前元素隐藏就设置消息，这会导致哪怕有一个元素显示，最后一个隐藏的元素依然会触发消息设置，完全不符合"全部隐藏"的判断逻辑。

正确实现方法 #

方法1：利用jQuery的:visible选择器快速判断

:visible会匹配所有可见元素，只需检查.test1 > .test2中可见元素的数量是否为0即可：

// 检查所有.test2是否都不可见
if ($('.test1 > .test2:visible').length === 0) {
  $('.test_message').text('nothing');
} else {
  // 有可见元素时清空消息（可选）
  $('.test_message').text('');
}

方法2：遍历标记法（适合自定义判断逻辑场景）

如果需要更精准的判断（比如仅严格检查display:none），可以遍历元素并标记是否存在可见项：

let allHidden = true;
$('.test1 > .test2').each(function() {
  // 只要有一个元素可见，就修改标记并跳出循环
  if ($(this).css('display') !== 'none') {
    allHidden = false;
    return false;
  }
});

// 根据最终标记判断是否显示消息
if (allHidden) {
  $('.test_message').text('nothing');
} else {
  $('.test_message').text('');
}

补充提示 #

确保页面中存在.test_message元素，否则消息无法正常显示。

内容的提问来源于stack exchange，提问作者user24637569