jQuery中如何将:has(:contains())选择器的字符串替换为变量？

我来帮你搞定这个问题！你遇到的情况是因为jQuery的:contains()选择器是作为字符串解析的，直接把变量硬塞进去会被当成字面量文本处理，所以得用字符串拼接的方式把变量正确整合到选择器里。这里有两种简单的实现方式：

1. 使用ES6模板字符串（推荐） #

模板字符串用反引号（）包裹，变量可以直接用${变量名}`的形式嵌入，写法更直观清晰：

// 定义你的目标变量
const targetLocation = "Norfolk";
// 用模板字符串拼接选择器
$(`.candidate-single:has(p:contains("${targetLocation}"))`).addClass('is-hidden');

2. 使用传统字符串拼接 #

如果你的项目还不支持ES6，也可以用加号（+）来拼接字符串：

var targetLocation = "Norfolk";
$('.candidate-single:has(p:contains("' + targetLocation + '"))').addClass('is-hidden');

额外注意：特殊字符处理 #

如果你的变量里包含引号、斜杠这类特殊字符，可能需要先对变量进行转义，避免破坏选择器的语法。比如可以写一个简单的转义函数：

function escapeSelector(str) {
  return str.replace(/["\\]/g, '\\$&');
}

const targetLocation = 'Norfolk"Test';
const escapedLocation = escapeSelector(targetLocation);
$(`.candidate-single:has(p:contains("${escapedLocation}"))`).addClass('is-hidden');

这样就能顺利把固定字符串换成变量啦！

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