本文介绍如何使用 jQuery 检测父元素是否包含特定文本，并仅在此条件下更新子 的显示文字，避免误匹配或 DOM 访问错误。
本文介绍如何使用 jquery 检测父元素是否包含特定文本，并仅在此条件下更新子 `` 的显示文字，避免误匹配或 dom 访问错误。
在实际前端开发中，常需基于上下文条件动态调整 UI 文本。例如，当运费说明为“INDIVIDUÁLNA CENA PREPRAVY na vyžiadanie”（即“按需协商的个性化运费”）时，将原本显示“ZADARMO”（免费）的价格标签改为“DOHODOU”（协商确定）。但直接比对父元素 text() 全等（===）极易失败——因为 HTML 中可能存在空白符、换行或额外空格，导致字符串完全不匹配。
正确的做法是：检查父元素的纯文本内容是否包含目标关键词，而非严格全等。同时应确保 DOM 已就绪，并增强代码健壮性（如验证元素是否存在）。
以下是推荐的实现方案（jQuery）：
$(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判断，防止$priceSpan或$parent为空时执行报错； - 选择器中为
data-testid值添加单引号（'[data-testid="recapItemPrice"]'），提升可读性与兼容性。
⚠️ 注意事项：
- 若页面通过 AJAX 或 React/Vue 等框架动态渲染，需确保脚本在目标 DOM 插入后执行（可监听事件或使用 MutationObserver）；
- “DOHODOU” 在问题答案中拼写为
DOHODOU，但示例代码中误写为DOHODOU（多一个O），请根据实际业务术语校对拼写（如正确应为DOHODOU）； - 原问题中 HTML 结构显示
<span></span>和文本同级位于<strong></strong>内，jQuery 的.parent().text()可正确获取全部子文本（含<span></span>内容），因此匹配逻辑依然成立——但若未来结构变化（如<span></span>被移出<strong></strong>），需同步调整选择器。
该方案简洁、可维护，适用于大多数基于文本上下文的条件渲染场景。
