如何选择具有特定类且以类结尾的元素？

Question

我有以下代码

<span id="student" class="studentTrainingActive selected-for">Foo bar</span>

如何选择？

根据这个answer我尝试使用以下代码：

$('span[class$="TrainingActive"].selected-for').length

但结果总是0。

我的代码有什么问题？

Answer 1

您的选择器只是有一个小问题。

class$="TrainingActive"

实际上应该是：

class*="TrainingActive"

结果代码：

console.log($('span[class*="TrainingActive"].selected-for').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="student" class="studentTrainingActive selected-for">Foo bar</span>

控制台输出：

1

为什么使用 *= 而不是 $=

正如@Andreas 所指出的，$= 作为选择器不起作用的原因是class 不以TrainingActive 结尾。看class属性：

studentTrainingActive selected-for

以selected-for结尾。

使用 contains (*=) 会根据需要愉快地匹配类，当然可以根据需要与 .selected-for 组合。