18

私のアイテムには次のクラスがあります。

<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-']" )が、そのクラス名を最短で最も読みやすいコードで変数に抽出するにはどうすればよいでしょうか (グローバル オブジェクトである可能性があります)。

4

4 に答える 4

20

このような？

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

フィドル

.removeClass()はコールバック関数を受け入れて何らかの操作を行い、削除するものが何も返されない場合は、削除する className を返します。

于 2013-06-28T15:04:55.123 に答える
4

すべての要素をループし、正規表現を使用してクラス名を取得し、それらを配列に格納できます。

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);
    }
});
console.log(classNames);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

于 2013-06-28T15:05:06.260 に答える
0

簡単な方法

独自のフィルタを作成できます:

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

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

フィドルを見る

于 2013-06-28T15:09:01.777 に答える