javascript - 用于查找类的所有元素的强大选择器

Question

如何获取类以 vd- 开头的所有元素？我的以下代码适用于大多数情况，但以下情况除外:

class="foo vd-bar"

它适用于这些情况:

class="vd-bar foo"

这是我的选择器，如果 HTML 标记使用单引号，它会起作用吗？例如； class='vd-foo'?

$('[class^="vd-"]', myElement).each(function(index, ele) {


});

Answer 1

不幸的是，CSS Level 3 attribute selectors非常有限(Level 4 in draft 也好不了多少)。

您必须结合使用中缀匹配和前缀匹配属性选择器，才能可靠地选择具有以 vd- 开头的类的所有元素。 :

[class*=" vd-"], [class^="vd-"] {
    ...
}

第一个将选择属性值为 class 的元素包含 <space>vd- (像 foo vd-... 这样的情况)，第二个将修补 vd- 的 Angular 落案例类是第一个(像 vd-bar foo 的情况)。

性能

人们可能会倾向于使用仅中缀(子字符串)选择器，因为假定使用双属性选择器(中缀和前缀匹配)会导致性能损失，故意牺牲准确性并接受不匹配喜欢 yrivd-button 对于 vd-button .

然而，measurements show在仅中缀匹配选择器和组合中缀+前缀之间的性能没有显着的差异 匹配选择器(在 substringMatch 测试中比较 classPrefixSelector 和 jsperf.com)。

组合选择器仅比单个属性值匹配选择器慢 2% 到 7%(取决于浏览器)。

如果有人担心这一点，她根本不应该使用属性选择器，而应该只使用类选择器 .vd-name , 比任何属性选择器(包括最简单的 [attr] ，它只测试属性是否存在)快 2 到 3 倍。