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
DDDoriginal
2024-11-26 12:50:09540parcourir

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

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 Mise à jour :

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

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!

Déclaration:
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