本文详解如何用纯 jquery 遍历指定父元素下的所有子 div，统一判断其 display 样式是否均为 'none'，并在全部隐藏时输出提示文本，包含基础循环方案与更简洁的伪类选择器方案。
本文详解如何用纯 jquery 遍历指定父元素下的所有子 div，统一判断其 display 样式是否均为 'none'，并在全部隐藏时输出提示文本，包含基础循环方案与更简洁的伪类选择器方案。
在 jQuery 开发中，常需对一组同级元素进行“全量状态校验”——例如：检查 .test1 容器内所有 .test2 子 div 是否全部隐藏（display: none），再统一触发提示逻辑。初学者易犯的典型错误是：在 .each() 循环中对每个元素单独判断并立即操作 DOM（如反复设置 .test_message 文本），这不仅低效，还可能导致逻辑误判（如部分隐藏时仍输出“nothing”）。
正确做法是先收集状态，后统一决策。以下是两种推荐实现方式：
✅ 方案一：显式遍历 + 状态标记（适合理解逻辑）
jQuery($ => {
let allHidden = true;
$('.test1 > .test2').each(function() {
// 只要发现一个可见元素，立刻标记为 false 并退出循环
if ($(this).css('display') !== 'none') {
allHidden = false;
return false; // 等价于 break，终止 each 循环
}
});
if (allHidden) {
$('.test_message').text('nothing');
}
});? 注意：
return false在.each()中用于提前终止循环，比return更精准；$(this).css('display')获取的是浏览器计算后的最终样式值，可靠兼容内联样式与 CSS 规则。
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 方案二：利用 :visible 伪类选择器（更简洁、更 jQuery 风格）
jQuery($ => {
// :visible 匹配所有 display ≠ 'none'、visibility ≠ 'hidden'、opacity ≠ 0 且尺寸非零的元素
if ($('.test1 > .test2:visible').length === 0) {
$('.test_message').text('nothing');
}
});? 提示：
:visible是 jQuery 内置的高级过滤器，自动综合多种隐藏条件（包括display: none、visibility: hidden、opacity: 0等），语义更清晰，代码更简练。若业务仅关注display属性，此方案依然安全有效。
⚠️ 重要注意事项
-
避免在循环中频繁操作 DOM：如原代码中每次匹配都执行
$('.test_message').text(...)，会引发多次重排重绘，影响性能； -
确保 DOM 就绪：示例中使用
jQuery($ => { ... })即$(document).ready()的简写，保证脚本执行时 HTML 已加载完成； -
慎用
display字符串比较：$(elem).css('display')返回值可能为'none'、'block'、'inline'等，但某些 CSS 框架或 reset 样式可能引入display: flex、display: grid等，若需兼容所有隐藏场景，优先选用:visible； -
类名与结构健壮性：建议为提示区域添加唯一 ID（如
#test-message）或明确作用域，避免因页面其他.test_message元素导致误操作。
综上，掌握“状态聚合→条件响应”的思维模式，比单纯记忆语法更重要。从显式循环过渡到语义化选择器，正是 jQuery 由入门走向熟练的关键跃迁。
