本文介绍如何使用 jQuery 检测父元素是否包含特定文本，并仅在条件满足时更新子 元素的文本内容，避免误匹配或 DOM 访问错误。
本文介绍如何使用 jquery 检测父元素是否包含特定文本，并仅在条件满足时更新子 `` 元素的文本内容，避免误匹配或 dom 访问错误。
在实际前端开发中，常需根据上下文动态调整 UI 文本。例如，当运费描述为“INDIVIDUÁLNA CENA PREPRAVY na vyžiadanie”（即“按需协商运费”）时，将原本显示“ZADARMO”（免费）的价格标签改为“DOHODOU”（协商后确定）。但直接比对父元素 text() 是否完全等于目标字符串容易失败——因为 HTML 中可能包含空白、换行或额外文本（如 <strong></strong> 内混排了 <span></span> 和纯文本），导致 === 严格相等判断失效。
✅ 正确做法是：检查父元素的完整文本内容是否包含目标关键词，而非要求完全一致。同时应确保元素存在，避免运行时错误：
$(document).ready(function() {
const $priceSpan = $("[data-testid='recapItemPrice']");
const $parent = $priceSpan.parent();
// 安全检查：确保元素存在且父元素有文本内容
if ($priceSpan.length && $parent.length) {
const parentText = $parent.text().trim();
if (parentText.includes("INDIVIDUÁLNA CENA PREPRAVY na vyžiadanie")) {
$priceSpan.text("DOHODOU");
}
}
});
? 关键说明：
- 使用
.includes()替代===，实现子串匹配，更鲁棒； - 添加
.trim()清除首尾空白，提升匹配可靠性； - 通过
.length判断 jQuery 对象是否选中有效元素，防止空集操作报错； - 推荐使用属性选择器引号（
[data-testid='recapItemPrice']），增强语法可读性与兼容性。
⚠️ 注意：若页面通过 AJAX 或 React/Vue 等框架动态渲染，需确保脚本执行时机晚于目标 DOM 加载（例如监听 MutationObserver 或在框架生命周期钩子中调用），否则可能因元素尚未挂载而失效。
