2011-10-18 19 views
5

我有一個div,看起來像jQuery的獲得一定的類,但不是別人

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

Clases是在沒有特定的順序。如果我做$('div').attr('class')那麼我會得到該div所有類的列表。我想要的只是獲得不是resizabledraggabletable的類。在這種情況下,我想要abc shadow。我該怎麼做呢。

+0

所以,你要實際的類名,而不是HTML元素? –

+2

提示:如果你解釋你想要做的而不是(或除了)詢問你認爲你可能完成的一種方式,你會得到更好的答案。爲什麼你想要一個類的列表減去其他的? (你打算怎麼處理它們。) – Phrogz

回答

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

請注意,您不需要第二replace(你不需要脫光開頭和結尾的空格),如果你想要的是這是適合設置className爲一個字符串。

不過,如果你想只從一個元素刪除一組已知類別,遠好簡單:

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

替代(無需正則表達式):

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

謝謝,但我在每個類之前都得到了逗號',abc,shadow'我想在每個類之後留出一個空格,所以它看起來像'abc shadow' – Pinkie

+0

@Pinkie:'some.split(/ \ s + /)'返回一個陣列。你可以用你想要的任何方式連接它的元素。 –

+0

離開拆分會給你一個空格分隔的字符串適合設置類(如果這是你想要做的)。 – Phrogz

0

您可以使用.hasClass檢查個別班級。

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

這並不回答問題 – Pinkie

+0

這是一個嘗試提供比你所做的更好的解決方案。您應該告訴我們底層問題,以便我們提供更好的解決方案。 –

0

這裏回答了這個問題。 Get class list for element with jQuery

您可以擴展此先手不在數組中的字符串「調整大小,拖動或表」

+0

這與問題無關。 – Pinkie

+0

我不確定爲什麼你認爲這與問題無關。引用的帖子提供了從元素中獲取所有類名並將它們填充到數組中的方法。然後,你拿這個數組,解析出你不想要的3個類。 –

+0

爲了增強您的答案,您應該將該答案中找到的代碼改爲問題而不是簡單地鏈接到該問題。 –

1

@Phrogz答案是一個很好的一個。顯然,他是一個正則表達式。因爲我不知道那個正則表達式很好,這是我對此採取:

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

這裏的a working fiddle to illustrate

+1

我認爲你需要否定('if(aryClasses [i]!=「resizable」|| ...)')而不是完全匹配已知的類。 – Phrogz

+0

@Progrog,你說的沒錯。更新。 –

4

一個插件:

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

用法:

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

不錯。 +1顯示我'$ .map'和'null'自動壓縮結果。 (我可能會親自將方法重命名爲'getClassesWithout',但這比其他任何東西都更優先。) – Phrogz

+2

@Josh:不確定你爲什麼這樣做,但它不會改變任何內容,事實上JSLint更喜歡其他方式。 –

+0

@FelixKling我的不好,你是對的,乍一看我以爲這是一個錯字! –

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

看看這個jsFiddle,我有一些工作就像你想要的東西。

而且,看看jQuery :not selectors

+0

這完全不是OP所要求的... –

相關問題