CSS 选择器 *= 模糊 id + 区别答案

【问题标题】：CSS Selector *= ambiguous id + distinctionCSS 选择器 *= 模糊 id + 区别
【发布时间】：2014-11-10 21:18:41
【问题描述】：

我对 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，即使我更喜欢它。

【问题讨论】：

【解决方案1】：

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

首先，您可以创建自己的标准单词边界（您的示例使用-，如果这在您的所有 ID 中都是一致的，那么这将起作用）来执行以下操作：

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

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

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

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

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

【讨论】：

【解决方案2】：

您似乎也可以检查它后面是否还有连字符：

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

【讨论】：