Как выбрать элемент, который имеет определенный класс и имеет класс, который заканчивается на?

Question

У меня есть следующий код

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

Как его выбрать?

В соответствии с этим ответом Я пытался использовать следующий код:

$('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.

Использование вместо содержит (*=) удачно соответствует классу по мере необходимости и, конечно, может бытьв сочетании с .selected-for как вам нужно.