jQuery的 - 提取物類名前綴「開頭」

Question

我的項目有以下類別：

<div class="class-x some-class-1 other-class"></div> 
<div class="some-class-45 class-y"></div> 
<div class="some-class-123 something-else"></div> 

我想知道如果有一個簡單的方法：

1. 只抓住所有類與some-class-前綴。
2. 從每個元素中刪除它們。
3. 在變量中有他們的名字（不對應的DOM元素）嗎？

我可以容易地選擇這樣的元件與jQuery("div[class^='some-class-'], div[class*=' some-class-']")但如何它的類名可以用最短和最可讀代碼到一個變量中提取（可以是一些全局對象）？

Answer 1

是否這樣？

var arrClasses = []; 
$("div[class*='some-class-']").removeClass(function() { // Select the element divs which has class that starts with some-class- 
    var className = this.className.match(/some-class-\d+/); //get a match to match the pattern some-class-somenumber and extract that classname 
    if (className) { 
     arrClasses.push(className[0]); //if it is the one then push it to array 
     return className[0]; //return it for removal 
    } 
}); 
console.log(arrClasses); 

Fiddle

.removeClass()接受一個回調函數做一些操作，並返回一個className被刪除，如果沒有要刪除任何回報。

Answer 2

你可以通過所有的元素循環，使用正則表達式拉類的名稱，並將其存儲在一個數組：

var classNames = []; 
$('div[class*="some-class-"]').each(function(i, el){ 
    var name = (el.className.match(/(^|\s)(some\-class\-[^\s]*)/) || [,,''])[2]; 
    if(name){ 
     classNames.push(name); 
     $(el).removeClass(name); 
    } 
}); 

演示：http://jsfiddle.net/vUWpQ/1/

Answer 3

最簡單的辦法

您可以創建您自己的過濾器：

$.fn.hasClassStartsWith = function(className) { 
    return this.filter('[class^=\''+className+'\'], [class*=\''+className+'\']'); 
} 

var divs = $('div').hasClassStartsWith("some-class-"); 
console.log(divs.get()); 

See fiddle

Answer 4

您可以遍歷每個找到的節點並遍歷這些類以查找匹配;如果發現，刪除類和記錄它：

var found = []; 

$('div[class*="some-class-"]').each(function() { 
    var classes = this.className.split(/\s+/), 
    $this = $(this); 

    $.each(classes, function(i, name) { 
     if (name.indexOf('some-class-') === 0) { 
      $this.removeClass(name); 
      found.push(name); 
     } 
    }); 
}); 

注意，像div[class*="some-class-"]選擇是相當昂貴的，因爲你需要無論如何執行額外的處理，這將是容易，只需遍歷所有div標籤並對其進行處理：

var elements = document.getElementsByTagName('div'), 
found = []; 

$.each(elements, function(i, element) { 
    var classes = element.className.split(/\s+/); 

    $.each(classes, function(i, name) { 
     if (name.indexOf('some-class-') === 0) { 
      $(element).removeClass(name); 
      found.push(name); 
     } 
    }); 
}); 

現代瀏覽器暴露Element.classList，你可以用它來操縱類名和Array.forEach迭代：

var found = []; 

[].forEach.call(document.getElementsByTagName('div'), function(element) { 
    (function(names, i) { 
     while (i < names.length) { 
      var name = names[i]; 
      if (name.indexOf('some-class-') === 0) { 
       names.remove(name); 
       found.push(name); 
      } else { 
       ++i; 
      } 
     } 
    }(element.classList, 0)); 
});