本文详解为何 if (jQuery("body:not(.home)")) 总是为真，以及如何通过检查 .length 属性准确判断当前页面是否为非首页，避免误触发 DOM 操作。
本文详解为何 `if (jquery("body:not(.home)"))` 总是为真，以及如何通过检查 `.length` 属性准确判断当前页面是否为非首页，避免误触发 dom 操作。
在 WordPress 主题中，常需对特定页面（如排除首页）执行定制化 JavaScript 逻辑。但一个常见误区是：将 jQuery 选择器本身直接用作 if 条件，误以为它会返回布尔值表示“是否存在匹配元素”。实际上，jQuery("body:not(.home)") 永远返回一个 jQuery 对象（即使未匹配到任何元素），而该对象在 JavaScript 中始终为真值（truthy），导致条件恒成立。
✅ 正确做法是检查匹配元素的数量：
<script>
jQuery(document).ready(function($) {
var totalHeight = 0;
// ✅ 正确：判断 body 元素是否不包含 .home 类（即非首页）
if ($("body:not(.home)").length > 0) {
$(".et-l--header .et_builder_inner_content .et_pb_section").each(function() {
totalHeight += $(this).outerHeight(true); // true 表示包含 margin，更精确
});
$("#et-main-area").css("padding-top", totalHeight + "px");
}
});
</script>
? 关键修正点说明：
- $("body:not(.home)").length > 0 确保仅当 标签不含有 .home 类时才执行后续逻辑（WordPress 默认在首页 添加 home 类）；
- 使用 $ 作为 jQuery 别名（并在 IIFE 中传入 jQuery）可避免与其他库冲突；
- outerHeight(true) 推荐替代 outerHeight()，以包含 margin，提升高度计算准确性；
- 变量命名采用驼峰式（totalHeight）提升可读性。
⚠️ 注意事项：
- 不要依赖 document.body.classList.contains("home") 等原生方法，除非确保 DOM 已就绪且 class 名未被主题动态修改；
- 若使用 Elementor、Divi 等可视化构建器，请确认 .et-l--header 等选择器在目标页面确实存在，否则循环不会执行但也不会报错；
- 建议将该脚本移至独立 JS 文件并通过 wp_enqueue_script() 加载，并设置 'jquery' 为依赖，确保执行时机与 jQuery 可用性可控。
总结：jQuery 对象不是布尔值——判断存在性必须查 .length。这一原则适用于所有类似场景，如 $(".target").length > 0 或 $("#modal").length === 0，是健壮前端逻辑的基础。
