JQuery выбрать элементы с несколькими классами

Question

Мне нужно выбрать все элементы, которые содержат несколько классов. Имена классов не имеют значения, мне просто нужно выбрать любые элементы с двумя или более.

Как будет выглядеть селектор jQuery для этого?

Answer 1

Это должно выбрать все элементы с более чем двумя классами.

$('*').filter(function() {
  return this.className.trim().split(/\s+/).length > 1;
}).foo('bar');

Answer 2

$('[class*=" "]')

Возвращает все теги с пробелом в атрибуте класса.

Answer 3

Другое понимание приводит меня к лучшему решению (мои извинения за поспешный вывод):

Демо

(function($){
    $.expr[':'].classes = function(o,i,m,s){
        var c = o.className.match(/\s*(.*)\s*/)[0].split(/\s+/).length;

        // Hard [fixed] limit
        // :classes(N)
        if (/^\d+$/.test(m[3])) {
            var n = parseInt(m[3], 10);
            return o.className.split(/\s+/).length == n;
        }

        // Expression:
        // :classes(>N)    :classes(>=N)
        // :classes(>N)    :classes(<=N)
        else if (/^[<>]=?\d+$/.test(m[3])) {
            var e = m[3].match(/^[><]=?/)[0],
                n = m[3].match(/\d+$/)[0];
            switch (e){
                case '<':
                    return c < n;
                case '<=':
                    return c <= n;
                case '>':
                    return c > n;
                case '>=':
                    return c >= n;
            }
        }

        // Range
        // :classes(4-6)
        else if (/^\d+\-\d+$/.test(m[3])) {
            var ln = parseInt(m[3].match(/^(\d+)/)[0], 10),
                hn = parseInt(m[3].match(/(\d+)$/)[0], 10);
            return ln <= c && c <= hn;
        }

        // all else fails
        return false;
    };
})(jQuery);

Обновлено Добавлена ​​дополнительная гибкость в отношении аргумента, который вы можете указать.Теперь у вас есть следующие опции (замена N & M числами):

• :classes(N)
  Находит элементы с ровно N классами
• :classes(<=N)
  Находит элементыс N или меньшим количеством классов
• :classes(<N)
  Находит элементы с меньшим количеством N классов
• :classes(>=N)
  Находит элементы с N или более классами
• :classes(>N)
  Находит элементы с более чем N классами
• :classes(N-M)
  Находит элементы, количество классов которых находится между N и M

Answer 4

Следующий код сначала выберет все элементы с пробелом в атрибуте класса. Мы могли бы просто сделать $ ('*'), как предлагает Blender, но это менее эффективно, потому что изначально он выбирает ВСЕ элементы на странице, а не только те, которые являются жизнеспособными кандидатами (т. Е. Имеют пробел в имени класса).

Он также учитывает те случаи, когда существует только один класс, но в атрибуте класса есть пробел (это делается с помощью метода $ .trim () jQuery для атрибута класса перед его разбиением). Блендер не решает такую ​​ситуацию.

$(function(){
    var div = $('div[class*=" "]').filter(function(){
        var clsArray = $.trim(this.className.split(' ');
        return clsArray.length > 1;
    });
    div.css('background','yellow');
});

Живой пример: http://jsfiddle.net/udBZy/3/

Answer 5

Работает так же, как обычный CSS

$('.class1.class2') // will select elements with both classes