several - jquery multiple class

jQuery selecciona elementos con múltiples clases

Question

Necesito seleccionar todos los elementos que contienen múltiples clases. Los nombres de las clases no importan, solo necesito seleccionar cualquier elemento con dos o más.

¿Cómo se vería el selector de jQuery?

Answer 1

El siguiente código seleccionará primero todos los elementos con un espacio en el atributo de clase. Podríamos simplemente hacer $ (''*'') como Blender sugiere, pero eso es menos eficiente porque inicialmente selecciona TODOS los elementos en la página, en lugar de solo aquellos que son candidatos viables (es decir, tienen un espacio en el nombre de la clase).

También tiene en cuenta aquellos casos en los que solo hay una clase, pero el atributo de clase tiene un espacio (esto se hace mediante el método $ .trim () de jQuery en el atributo de clase antes de dividirlo). Blender''s no resuelve este tipo de situación.

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

Ejemplo en vivo: http://jsfiddle.net/udBZy/3/

Answer 2

Esto debería seleccionar todos los elementos con más de dos clases.

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

Answer 3

Una comprensión diferente me lleva a una mejor solución (mis disculpas por llegar a una conclusión):

Manifestación

(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);

Actualizado Se agregó un poco más de flexibilidad con respecto al argumento que puede proporcionar. Ahora tiene las siguientes opciones (reemplazando N & M con números):

• :classes(N)
  Encuentra elementos con exactamente N clases
• :classes(<=N)
  Encuentra elementos con N o menos clases
• :classes(<N)
  Encuentra elementos con menos de N clases
• :classes(>=N)
  Encuentra elementos con N o más clases
• :classes(>N)
  Encuentra elementos con más de N clases
• :classes(NM)
  Encuentra elementos cuyo recuento de clases se encuentra entre N y M

Answer 4

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

Devuelve todas las etiquetas con un espacio en el atributo de clase.

Answer 5

Funciona como el CSS regular

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