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

Question

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

在id＝house树日志中查找树。我这样做：

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（可选地在一个范围内），然后迭代它们，并在它们的ID上进行正则表达式匹配，在这里可以使用单词边界：

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

Answer 2

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

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