CSS Selector * =不明确的id +区别

Question

我遇到了CSS-Selector * =和一个含糊不清的ID问题。问题是，我需要在长id中找到某个字符串。例如：

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

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

问题是，我也有这样的案例（最后的结论）：

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 s（可选择在范围内），然后迭代它们并对其ID进行正则表达式匹配，您可以使用字边界：

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

Answer 2

似乎你可以检查它后面是否还有一个连字符：

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