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-类的角落情况第一个（例如vd-bar foo）。

效果

由于使用双属性选择器（中缀和前缀匹配）导致的假定性能损失，故意牺牲准确性并接受不匹配，因此可能会尝试使用 only infix （substring）选择器例如vd-button的{{3}}。

但是，yrivd-button 仅中缀匹配选择器与之间的无统计上显着差异 strong>合并中缀+前缀匹配选择器（在measurements show测试中比较substringMatch和classPrefixSelector）。

组合选择器 慢2％到7％（取决于浏览器），而不是单个属性值匹配选择器。

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

Answer 2

您需要使用包含选择器（*），而不是使用选择器（^）。除此之外，只要您正确匹配它们，是否使用单引号或双引号并不重要。这是一个例子：

$("[class*='vd-']").css("border", "1px solid #f00");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo vd-bar">first div</div>
<div class='vd-bar foo'>second div</div>
<div class='fvd-bar foo'>third div</div>

注意：如您所见，上面的代码将选择包含“vd-”的所有内容。对于大多数情况来说这应该没问题，因为通常类前缀不会出现在类名的中间。如果他们这样做，那被认为是一个糟糕的设计。如果您只想选择类别以“vd-”开头的元素，那么这不能在简单的选择器中完成，因此您必须使用两个选择器，如下面的randomir的答案。这在大型文档中具有性能成本，因此除非必要，否则最好避免使用它。这是一个jQuery示例：

$("[class*=' vd-'],[class^='vd-']").css("border", "1px solid #f00");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo vd-bar">first div</div>
<div class='vd-bar foo'>second div</div>
<div class='fvd-bar foo'>third div</div>

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

2 个答案:

效果