满足父元素文本条件时修改指定span元素文本的jQuery问题

需求 #

仅当父元素<strong data-testid="recapDeliveryMethod">包含文本INDIVIDUÁLNA CENA PREPRAVY na vyžiadanie时，将其子元素<span data-testid="recapItemPrice">的文本从ZADARMO修改为DOHODOU。

原始HTML结构 #

<strong data-testid="recapDeliveryMethod">                                                            
<span data-testid="recapItemPrice">ZADARMO</span>
INDIVIDUÁLNA CENA PREPRAVY na vyžiadanie</strong>

你尝试的代码 #

$(document).ready(function(){
if ( $("[data-testid=recapDeliveryMethod]").text() === "INDIVIDUÁLNA CENA PREPRAVY na vyžiadanie" ) {
    $("[data-testid=recapItemPrice]").text("DOHODOU");
}
});

问题分析 #

你的代码执行失败的核心原因：父元素的text()内容包含了子span的文本ZADARMO、换行符、大量空格，以及目标文本，直接用===严格全等匹配会因内容不一致导致判断不成立。另外，如果页面存在多个相同data-testid的元素，全局修改span会出现误操作。

修正后的jQuery代码 #

$(document).ready(function(){
  // 遍历所有目标父元素，逐个判断处理
  $('[data-testid=recapDeliveryMethod]').each(function() {
    // 检查当前父元素文本是否包含指定字符串
    if ($(this).text().includes('INDIVIDUÁLNA CENA PREPRAVY na vyžiadanie')) {
      // 仅修改当前父元素下的目标span
      $(this).find('[data-testid=recapItemPrice]').text('DOHODOU');
    }
  });
});

关键修正点 #

• 用includes()替代===：无需完全匹配父元素的所有文本，只需检查是否包含目标内容，自动忽略多余空白字符和子元素文本
• 用each()遍历+$(this).find()：确保只修改当前符合条件的父元素下的span，避免多元素场景下的误修改

纯JavaScript实现（无需jQuery） #

如果后续想脱离jQuery，可使用原生JS实现：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有目标父元素
  const deliveryElements = document.querySelectorAll('[data-testid="recapDeliveryMethod"]');
  deliveryElements.forEach(element => {
    // 检查文本是否包含目标内容
    if (element.textContent.includes('INDIVIDUÁLNA CENA PREPRAVY na vyžiadanie')) {
      // 查找当前元素下的span并修改文本
      const priceSpan = element.querySelector('[data-testid="recapItemPrice"]');
      if (priceSpan) priceSpan.textContent = 'DOHODOU';
    }
  });
});

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