jQuery obtener ciertas clases pero no en otros

Question

tengo un div que se parece a

<div class="draggable resizable abc table shadow"></div> 

Clases están en ningún orden específico. Si hago $('div').attr('class') entonces obtengo una lista de todas las clases para ese div. Lo que quiero es solo obtener clases que no sean resizable, draggable o table. En este caso quiero abc shadow. Cómo hago esto.

Answer 1

var all = "draggable resizable abc table shadow"; 
var some = all.replace(/(?:^|\s)(resizable|draggable|table)(?=\s|$)/g, ''); 

console.log(some); 
// " abc shadow" 

console.log(some.replace(/^\s+|\s+$/g,'')); 
// "abc shadow" 

console.log(some.split(/\s+/)); 
// ["", "abc", "shadow"] 

Tenga en cuenta que no es necesario el segundo replace (que no es necesario quitarse espacio inicial y final) si lo que quieres es una cadena que es apropiado para el ajuste del className a.

Pero entonces, si usted está tratando de eliminar sólo un conjunto de clases conocidas de un elemento, mucho mejor simplemente:

$(...).removeClass("draggable resizable table"); 

Alternativa (sin necesidad de una expresión regular):

var ignore = {resizable:1, draggable:1, table:1}; 
var all = "draggable resizable abc table shadow".split(' '); 
for (var subset=[],i=all.length;i--;) if (!ignore[all[i]]) subset.push(all[i]); 

console.log(subset); 
// ["shadow","abc"] 

console.log(subset.join(' ')); 
// "shadow abc" 

Answer 2

Puede verificar las clases individuales usando .hasClass.

$("div").hasClass("class"); 

Answer 3

Esto fue respondido aquí. Get class list for element with jQuery.

Se puede extender este para obtener sólo las cadenas de la matriz que no son "de tamaño variable, que pueden arrastrarse o mesa"

Answer 4

@Phrogz respuesta es una buena. Aparentemente, él es un experto en regex. Dado que no sé de expresiones regulares que bueno, aquí está mi opinión sobre ella:

var aryClasses = $("div").attr("class").split(" "); 
var aryDesiredClasses = new Array(); 

for(var i = 0; i < aryClasses.length; i++) { 
    if(aryClasses[i] != "table" 
        && aryClasses[i] != "resizable" 
        && aryClasses[i] != "draggable") 
     aryDesiredClasses.push(aryClasses[i]); 
} 

alert(aryDesiredClasses.join(" ")); 

Aquí es a working fiddle to illustrate.

Answer 5

Un plugin:

(function($) { 
    $.fn.getClasses = function(exclude) { 
     var remove = {}; 

     for(var i = exclude.length; i--;) { 
      remove[exclude[i]] = true; 
     } 

     return $.map(this.attr('class').split(/\s+/g), function(cls) { 
      return remove[cls] ? null : cls; 
     }); 
    }; 
}(jQuery)); 

Uso:

var classes = $('div').getClasses(['resizable', 'draggable', 'table']); 

Answer 6

 function getDesiredClass(removedClassArr){ 
      var classArray = $("selector").attr('class').split(" "); 
      var desiredClassArray = []; 
      for(var i = 0; i < classArray.length; i++){ 
       if (!isUnDesiredClass(removedClassArr, classArray[i])){ 
        desiredClassArray .push(classArray[i]); 
       } 
      } 
      return desiredClassArray; 
     } 
     function isUnDesiredClass(removedClassArr , cls){ 
     for(var i = 0; i < removedClassArr.length; i++){ 
      if(removedClassArr[i] == cls){ 
       return true; 
      } 
     } 
     return false; 
    } 

Answer 7

var classes = $('div').not('.resizable, .draggable, .table').attr('class').split(' '); 

Answer 8

echar un vistazo a este jsFiddle, tengo algo de trabajo al igual que lo que quería.

También, echar un vistazo a jQuery :not selectors