Javascript 用于查找类的所有元素的健壮选择器

如何获取所有具有以

vd-

开头的类的元素？以下代码适用于除以下情况外的大多数情况：

class="foo vd-bar"

它适用于以下情况：

class="vd-bar foo"

这是我的选择器，如果HTML标记使用单引号，它会工作吗？对于eg<代码>class='vd-foo'

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


});

---

您需要使用contains选择器（

*

），而不是start with选择器（

^

）。除此之外，使用单引号还是双引号并不重要，只要匹配正确即可。以下是一个例子：

$（“[class*='vd-']”）css（“边框”，“1px实心体#f00”）

第一组
第二组
第三个div
不幸的是，CSS非常有限（也没有更好）

您必须使用中缀匹配和前缀匹配属性选择器的组合，以使用以
vd-
开头的类实现所有元素的健壮选择：

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

第一个将选择属性值为
class
包含
vd-
（如
foo vd-…
）的元素，第二个将修补
vd-
类作为第一个属性的角案例（如
vd bar foo
）

演出
人们可能会尝试只使用中缀（子字符串）选择器，因为假定使用双属性选择器（中缀和前缀匹配）会导致性能损失，故意牺牲准确性并接受不匹配，如
vd按钮

然而，在仅中缀匹配选择器和组合的中缀+前缀匹配选择器（在测试中比较
子字符串匹配
和
类前缀选择器
）之间的性能差异

组合选择器仅比单个属性值匹配选择器慢2%-7%（取决于浏览器）

如果有人担心这一点，她根本不应该使用属性选择器，而应该只使用类选择器
.vd name
，，它比任何属性选择器（包括最简单的一个
[attr]
，它只测试属性是否存在）快2到3倍是否被选择？是，任何包含“vd-”的内容都将被选择。我已经将其添加到我的示例中。我不相信OP想要选择类名为
的元素，如
。请阅读问题的第一句话：“如何获取所有以
vd-
开头的类的元素”@randomir尽管从字面上看问题在技术上是正确的，但通常类前缀不会出现在类名的中间。如果他们这样做，那被认为是一个糟糕的设计。正如您所知，在大型文档中，有两个选择器（如答案中所示）会带来明显的性能成本，因此除非必要，否则最好避免使用。然而，为了完整的回答，我引用了你的答案并添加了一个例子。