Пример html:
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="apple"></div>
Я хочу перебрать элементы div и отфильтровать их, если у них нет класса «красный», «зеленый» или «синий».
var onlyColorDivs = $('div').hasClass( __________ );
Есть ли способ заполнить пробел в предыдущей строке, чтобы выполнить это. Или мне придется поместить классы цветов списка в массив и выполнить цикл?
Дайте мне знать, если нужны какие-либо разъяснения.
Все ответы хороши и уместны. Но если вам очень нужна подобная функция, вы также можете использовать 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');
Есть ли что-то неправильное в использовании обычного способа выбора?
$(".red, .green, .blue");
Если у вас уже есть коллекция, которую вы хотите отфильтровать, скажите
$("div");
Вы можете использовать функцию filter, как уже упоминалось, но это будет медленнее, поэтому, если у вас есть выбор, кодируйте его в одном селекторе.
Расширение jQuery для уже поддерживаемой функциональности, доступной с другим синтаксисом, не требуется. Если вы настаиваете на использовании массива в качестве входных данных, будет быстрее присоединиться к нему в селекторе:
var classes = new Array("red", "green", "blue");
$("div." + classes.join(",div."));
Это выберет только <div> элементов, которые имеют хотя бы один из этих 3 классов.
Попробуйте: http://jsfiddle.net/gADQn/
var onlyColorDivs = $('div.red, div.green, div.blue');
.filter('.red,.green,.blue')
Должен делать работу.
Или просто изначально выберите их:
$('.red,.green,.blue', context)
.filter(selector) — это функция, которую вы ищете. Вызов этого для выбора элементов jQuery улучшит выбор до тех элементов, которые соответствуют предоставленному вами селектору. Кроме того, вы можете просто выбрать только эти элементы для начала.
Так что либо: $('div').filter('.red, .green, .blue');
Or: $('div.red, div.green, div.blue');
Вот документация по использованию функции фильтра: http://api.jquery.com/filter/
И, наконец, демонстрация его использования: http://jsfiddle.net/Etb7R/
Этот небольшой скрипт выбирает все <div> и заполняет их текстом их атрибута класса, затем фильтрует только те, у которых есть классы «красный», «зеленый» или «синий», и применяет дополнительный класс, чтобы выделить их. Надеюсь, это должно дать вам хорошее представление о вашем диапазоне вариантов.
Определить, имеет ли элемент класс CSS с помощью jQuery
http://docs.jquery.com/Traversing/hasClass
