ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML 要素から特定のプレフィックスを持つクラスを削除するにはどうすればよいですか?

HTML 要素から特定のプレフィックスを持つクラスを削除するにはどうすればよいですか?

DDD
リリース: 2024-11-26 12:50:09
オリジナル
572 人が閲覧しました

How to Remove Classes with a Specific Prefix from an HTML Element?

HTML 要素から特定の接頭辞を持つクラスを削除する

特定のシナリオでは、事前定義された接頭辞に基づいて要素からクラスを削除することが必要になります。 >

の div を考えてみましょう。課題:

私たちの目的は、「bg」などの特定のプレフィックスを持つすべてのクラスを効果的に削除することです。試行された解決策 $("#a").removeClass("bg*") は、望ましい結果を達成できませんでした。

解決策:

このタスクこれには、クラス リストのフィルタリングと再割り当てを含む、よりカスタマイズされたアプローチが必要です。 JavaScript または jQuery を使用したより正確な実装を以下に示します。

JavaScript:

var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();
ログイン後にコピー

jQuery Mixin:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};
ログイン後にコピー

2018 ES6更新:

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();
ログイン後にコピー

これらのソリューションは、指定されたプレフィックスで始まるすべてのクラス名を効果的に識別して削除し、動的なクラスの管理と操作を可能にします。

以上がHTML 要素から特定のプレフィックスを持つクラスを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート