Maison > interface Web > tutoriel CSS > Comment supprimer des classes avec un préfixe spécifique d'un élément HTML ?

Comment supprimer des classes avec un préfixe spécifique d'un élément HTML ?

DDD
Libérer: 2024-11-26 12:50:09
original
573 Les gens l'ont consulté

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

Suppression de classes avec un préfixe spécifique d'un élément HTML

Dans certains scénarios, la suppression de classes d'un élément en fonction d'un préfixe prédéfini devient nécessaire . Considérez un div avec>

Le défi :

Notre objectif est de supprimer efficacement toutes les classes avec un préfixe spécifique, tel que « bg ». La solution tentée, $("#a").removeClass("bg*"), ne parvient pas à atteindre le résultat souhaité.

La solution :

Cette tâche nécessite une approche plus personnalisée, qui implique de filtrer et de réaffecter la liste des classes. Une implémentation plus précise utilisant JavaScript ou jQuery est présentée ci-dessous :

JavaScript :

var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();
Copier après la connexion

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;
};
Copier après la connexion

2018 ES6 Mise à jour :

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();
Copier après la connexion

Ces solutions identifient et suppriment efficacement tous les noms de classe commençant par le préfixe spécifié, permettant une gestion et une manipulation dynamiques des classes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal