Как проверить с помощью jQuery, есть ли у элемента хотя бы один класс из списка указанных классов?

Question

Пример HTML:

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="apple"></div>

Я хочу пройтись по элементам div и отфильтровать их, если у них нет класса «red», «green» или «blue».

var onlyColorDivs = $('div').hasClass( __________ );

Есть ли способ заполнить пробел в предыдущей строке, чтобы сделать это. Или я собираюсь поместить свой список классов цвета в массив и сделать цикл?

Дайте мне знать, если потребуется какое-либо разъяснение.

Answer 1

Все ответы великолепны и уместны. Но, если вам нужна такая функция, вы также можете Monkey Patch метод hasClass, чтобы сделать то, что вы хотите:

var _hasClass = $.fn.hasClass;
$.fn.hasClass = function (classNames) {
  if (!classNames || typeof classNames === "string" ) {
    return _hasClass.call(this, classNames); // Default behavior
  } else {
    // Take array and parse it for the filter method
    var classes = '.' + classNames.join(', .');
    return this.filter(classes).length > 0;
  }
};

Тогда вы можете использовать это так:

$("div").hasClass(['red','green','blue']);
// or
$("div").hasClass('green');

Демонстрация на JS Bin

Answer 2

Что-то не так с использованием обычного способа выбора?

$(".red, .green, .blue");

Если у вас уже есть коллекция, которую вы хотите отфильтровать, скажем,

$("div");

Вы можете использовать filter функция, как уже упоминалось, но это будет медленнее, поэтому, если у вас есть выбор, закодируйте его в одном селекторе.

Расширение jQuery для уже поддерживаемых функций, доступных с другим синтаксисом, не требуется,Если вы настаиваете на использовании массива в качестве входных данных, было бы быстрее присоединиться к нему в селекторе:

var classes = new Array("red", "green", "blue");
$("div." + classes.join(",div."));

Answer 3

.filter('.red,.green,.blue')

Должен делать работу.

Или просто изначально выберите их:

$('.red,.green,.blue', context)

Answer 4

При этом будут выбраны только <div> элементы, которые имеют хотя бы один из этих 3 классов.

Попробуйте: http://jsfiddle.net/gADQn/

var onlyColorDivs = $('div.red, div.green, div.blue');

Answer 5

.filter (селектор) - это функция, которую вы ищете. Вызов этого для элементов jQuery уточнить выбор тех элементов, которые соответствуют выбранному вами селектору. Кроме того, вы можете просто выбрать эти элементы для начала.

Так что либо: $('div').filter('.red, .green, .blue');

Или: $('div.red, div.green, div.blue');

Вот документация по использованию функции фильтра: http://api.jquery.com/filter/

И, наконец, вот демонстрация его использования: http://jsfiddle.net/Etb7R/

Этот маленький скрипт выбирает все <div> s и заполняет их текстом атрибута их класса, затем фильтрует только те, у которых есть классы 'red', 'green' или 'blue', и применяет дополнительный класс к выделить их. Надеюсь, это даст вам хорошее представление о вашем диапазоне вариантов.

Answer 6

Определите, есть ли у элемента класс CSS с jQuery

http://docs.jquery.com/Traversing/hasClass