5

すべてのタグのクラス属性から「青」で終わるクラスを削除したい

サンプルhtml

<p class="text_blue happy">this is blue text</p>
<p class="text_red nothappy">this is red text</p>
<img class="img_blue nothappy" />

これにより、「blue」で終わるクラスを持つすべての要素が得られます

$('[class$=blue]');

これらの一致したクラス名をクラス属性からポップするにはどうすればよいですか？

4

2 に答える 2

8

次のような正規表現を使用して、クラス名全体を引き出すことができます。

$('[class$="blue"]').each(function() {
    var clsName = this.className.match(/\w*blue\w*/)[0];
});

認識すべきことの 1 つは、$('[class$="blue"]')という名前の属性全体を操作することですclass。私は個々のクラス名を操作しません。したがって、一致します：

class="happy text_blue"

しかし、それは一致しません:

class="text_blue happy"

class 属性が で終わっていないため"blue"です。"blue"クラス名属性のどこに配置されているかに関係なく、を含むクラス名を取得する場合は、次を使用する必要があります。

$('[class*="blue"]').each(function() {
    var clsName = this.className.match(/\w*blue\w*/)[0];
});

青で終わっていないクラス名をさらに除外したい場合は、次のように JS を使用してそれを行うことができます。

$('[class*="blue"]').each(function() {
    var match = this.className.match(/\w*blue(\b|$)/);
    if (match) {
        var clsName = match[0];
    }
});

オブジェクトからこれらのクラス名を削除したい場合は、次のように実行できます。

$('[class*="blue"]').each(function() {
    var match = this.className.match(/\w*blue(\b|$)/);
    if (match) {
        $(this).removeClass(match[0]);
    }
});

少しきれいに見えるこの方法でも実行できますが、削除するクラス名の周りの余分な空白を完全にクリーンアップすることはできません。

$('[class*="blue"]').each(function() {
    this.className = this.className.replace(/\w*blue(\b|$)/, "").replace(/\s+/g, ' ');
});
于 2012-02-07T23:13:42.557 に答える
3

これを頻繁に行う場合は、クラスの割り当て方法を変更することをお勧めします。次のようにHTMLを作成できます。

<p class="text blue happy">this is blue text</p>

.text_blue次に、CSSでのセレクターを使用する代わりに、代わりにを使用します.text.blue。次に、クラスから「青」を削除するだけです。

于 2012-02-07T21:46:55.073 に答える