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()何が戻り、何も削除しないことがあれば、いくつかの操作を行うと、削除するクラス名を返すために、コールバック関数を受け入れます。

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