> 웹 프론트엔드 > CSS 튜토리얼 > HTML 요소에서 특정 접두사가 있는 클래스를 제거하는 방법은 무엇입니까?

HTML 요소에서 특정 접두사가 있는 클래스를 제거하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-11-26 12:50:09
원래의
573명이 탐색했습니다.

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

HTML 요소에서 특정 접두사가 있는 클래스 제거

특정 시나리오에서는 미리 정의된 접두사를 기반으로 요소에서 클래스를 제거해야 합니다. . >

도전 과제:

우리의 목표는 "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿