使用jQuery实现仅隐藏含FREE文本对应的transaction-type div

你的问题出在没有针对每个独立的.price容器进行判断——原代码中$('.price>span').text()会把所有匹配的<span>文本合并成一个字符串，只要其中有一个包含"FREE"，就会执行$('.transaction-type').hide()，这自然会把所有同类元素都隐藏了。

下面提供两种简洁的解决方案：

方案1：遍历每个.price容器逐个判断 #

通过.each()方法遍历每个.price元素，在每个容器内单独检查<span>的内容，再隐藏对应的.transaction-type：

$('.price').each(function() {
  // 用$(this)指代当前遍历的.price元素
  const hasFree = $(this).find('span').text().includes('FREE');
  if (hasFree) {
    $(this).find('.transaction-type').hide();
  }
});

方案2：用选择器直接定位目标元素 #

利用:contains()选择器精准找到包含"FREE"的<span>，再通过兄弟选择器或父元素定位对应的.transaction-type：

// 方法A：通过兄弟元素定位
$('.price>span:contains("FREE")').siblings('.transaction-type').hide();

// 方法B：通过父元素查找
$('.price>span:contains("FREE")').parent().find('.transaction-type').hide();

注意事项 #

:contains()选择器是大小写敏感的，如果你的文本可能出现不同大小写形式（比如"Free"），可以结合.filter()方法做不区分大小写的判断：

$('.price>span').filter(function() {
  return $(this).text().toLowerCase().includes('free');
}).siblings('.transaction-type').hide();

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