2011-10-18 13 views
5

Ho un div che assomigliajQuery ottenere alcune classi, ma non altri

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

Clases non sono in alcun ordine specifico. Se faccio $('div').attr('class') allora ottengo una lista di tutte le classi per quel div. Quello che voglio è solo ottenere le classi che non sono resizable, draggable o table. In questo caso voglio abc shadow. Come faccio a fare questo.

+0

Così si desidera che i nomi di classe reali, non gli elementi HTML? –

+2

Suggerimento: otterrete risposte migliori se spiegherete cosa intendete fare al posto di (o in aggiunta a) chiedendo un modo in cui pensate di poterlo realizzare. Perché vuoi una lista di classi meno le altre? (Che cosa hai intenzione di fare con loro.) – Phrogz

risposta

4
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"] 

Si noti che non è necessario il secondo replace (non c'è bisogno di spogliarsi spazi iniziali e finali), se invece si è una stringa che è appropriato per l'impostazione della className a.

Ma allora, se si sta cercando di rimuovere solo un insieme di classi note da un elemento, molto meglio semplicemente:

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

alternativa (senza bisogno di una regex):

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" 
+0

Grazie, ma ottengo virgola prima di ogni classe ', abc, shadow' Voglio uno spazio dopo ogni classe in modo che assomigli a' abc shadow' – Pinkie

+0

@Pinkie: 'some.split (/ \ s + /)' restituisce un array. Puoi concatenare i suoi elementi nel modo che preferisci. –

+0

Lasciando fuori dallo split si otterrà una stringa delimitata dallo spazio adatta per impostare la classe su (se è ciò che si sta tentando di fare). – Phrogz

0

È possibile verificare le singole classi utilizzando .hasClass.

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

questo non risponde alla domanda – Pinkie

+0

È un tentativo di fornire una soluzione migliore di quello che stai facendo. Dovresti dirci il problema di fondo, quindi possiamo fornire una soluzione migliore. –

0

Questa è stata una risposta qui. Get class list for element with jQuery.

È possibile estendere questo per ottenere solo le stringhe nella matrice che non sono "ridimensionabile, trascinabile o una tabella"

+0

Questo è irrilevante per la domanda. – Pinkie

+0

Non sono sicuro del motivo per cui pensi che questo sia irrilevante per la domanda. Il post di riferimento fornisce un modo per ottenere tutti i nomi di classe dall'elemento e li popola in una matrice. Quindi prendi quella matrice e analizza le 3 classi che non vuoi. –

+0

Per migliorare la tua risposta, dovresti probabilmente adattare il codice trovato in quella risposta alla domanda invece di limitarti a collegarti ad essa. –

1

@Phrogz risposta è un buon compromesso. Apparentemente, è un mago regex. Dal momento che non so regex che bene, ecco il mio prendere su di esso:

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

Ecco a working fiddle to illustrate.

+1

Penso che tu voglia la negazione ('if (aryClasses [i]! =" Ridimensionabile "|| ...)') invece di corrispondere esattamente alle classi conosciute. – Phrogz

+0

@Phrogz, hai assolutamente ragione. Aggiornato. –

4

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

Usage:

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

Bello. +1 per avermi mostrato che '$ .map' insieme a' null' compatta automaticamente il risultato. (Potrei personalmente rinominare il metodo in 'getClassesWithout', ma è più preferibile che altro.) – Phrogz

+2

@Josh: Non sono sicuro del motivo per cui l'hai fatto ma non cambia nulla e in effetti JSLint preferisce l'altro modo. –

+0

@FelixKling Il mio male, hai ragione, a prima vista ho pensato che fosse un errore di battitura! –

1
 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; 
    } 
0
var classes = $('div').not('.resizable, .draggable, .table').attr('class').split(' '); 
0

dare un'occhiata a questo jsFiddle, ho qualcosa di lavoro come quello che si voleva.

Inoltre, uno sguardo ai jQuery :not selectors

+0

Questo non è affatto ciò che l'OP sta chiedendo ... –

Problemi correlati