jquery - CSS 选择器 *= 不明确的 id + 区别

Question

我对 CSS-Selector *= 和不明确的 id 有疑问。问题是，我需要在长 id 中找到某个字符串。例如:

在 id=house-tree-log 中查找树。我这样做是这样的:

var string = "tree";
var elem = $("div[id*="+string+"]");

问题是，我也有这样的情况(s在最后):

var string = "trees";
var elem = $("div[id*="+string+"]");

有什么办法可以区分它们吗？它不必是纯 CSS，即使我更喜欢它。

Answer 1

在 JS 或 CSS 规范中都没有“字边界”控制字符，因此您有几个选择，但都不是完美的。

首先，您可以创建自己的标准单词边界(您的示例使用 -，如果它在您的所有 ID 中都一致，那么它就可以工作)来执行如下操作:

var elem = $( 'div[id='+string+', div[id^="'+string+'-"], div[id*="-'+string+'-"], div[id$="-'+string+'"] ')

这匹配精确的字符串，任何以 string- 开头，包含 -string- 或以 -string 结尾的字符串。

这样做的好处是只选择你想要的元素，虽然它会运行 4 个选择，这意味着如果你有很多 div，你真的可以加载处理器。

---

另一种方法是选择所有 div(可选地在一个范围内)，然后迭代它们并对它们的 ID 进行正则表达式匹配，您可以在其中使用单词边界:

var elem = $('div').filter(function() { return this.id.match( new RegExp('\\b'+string+'\\b') ); });