[javascript] 하나를 제외한 모든 클래스 제거

Question 1

글쎄요, 일부 jQuery 액션을 사용하면 특정 div에 많은 클래스를 추가 할 수 있습니다.

<div class="cleanstate"></div>

몇 번의 클릭 등으로 div에 많은 클래스가 있다고 가정 해 보겠습니다.

<div class="cleanstate bgred paddingleft allcaptions ..."></div>

그렇다면 하나를 제외한 모든 클래스를 제거하려면 어떻게해야합니까? 내가 생각 해낸 유일한 아이디어는 이것입니다.

$('#container div.cleanstate').removeClass().addClass('cleanstate');

removeClass()모든 클래스를 죽이는 동안 div는 망가졌지만 그 직후에 추가 addClass('cleanstate')하면 정상으로 돌아갑니다. 다른 해결책은 기본 CSS 속성과 함께 ID 속성을 추가하여 삭제되지 않도록하는 것입니다. 성능도 향상되지만 “.cleanstate”를 제외한 모든 것을 제거하는 또 다른 솔루션을 알고 싶습니다.

실제 스크립트에서 div는 다양한 클래스 변경을 겪기 때문에 이것을 묻습니다.

Question 2

2 단계로 수행하는 대신 attr원하는 클래스로 모든 클래스 값을 덮어 써서 전체 값을 한 번에 재설정 할 수 있습니다 .

jQuery('#container div.cleanstate').attr('class', 'cleanstate');

샘플 : http://jsfiddle.net/jtmKK/1/

Question 3

attr 을 사용 하여 클래스 속성을 원하는 특정 값으로 직접 설정하십시오.

$('#container div.cleanstate').attr('class','cleanstate');

Question 4

JQuery가 아닌 평범한 오래된 JavaScript 사용 :

document.getElementById("container").className = "cleanstate";

Question 5

모든 클래스를 제거하자마자 애니메이션이 작동하지 않을 수 있으므로 CSS 애니메이션으로 인해 일부 클래스를 유지해야하는 경우가 있습니다. 대신 다음과 같이 일부 클래스를 유지하고 나머지를 제거 할 수 있습니다.

$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');

Question 6

Robs 답변과 관련하여 완전성을 위해 바닐라와 함께 querySelector를 사용할 수도 있습니다.

document.querySelector('#container div.cleanstate').className = "cleanstate";

Question 7

하나 이상의 클래스를 유지하고 이들을 제외한 클래스를 원하는 경우 어떻게해야합니까? 이러한 솔루션은 모든 클래스를 제거하지 않으려는 경우 해당 클래스를 다시 추가하지 않으려는 경우 작동하지 않습니다.
attr 및 removeClass ()를 사용하면 첫 번째 인스턴스에서 모든 클래스를 재설정 한 다음 해당 클래스를 다시 연결합니다. 다시 재설정되는 클래스에서 일부 애니메이션을 사용하면 실패합니다.

일부 클래스를 제외한 모든 클래스를 제거하려면 이것은 당신을위한 것입니다. 내 솔루션은 다음과 같습니다. removeAllExceptThis

Array.prototype.diff = function(a) {
            return this.filter(function(i) {return a.indexOf(i) < 0;});
        };
$.fn.removeClassesExceptThese = function(classList) {
/* pass mutliple class name in array like ["first", "second"] */
            var $elem = $(this);

            if($elem.length > 0) {
                var existingClassList = $elem.attr("class").split(' ');
                var classListToRemove = existingClassList.diff(classList);
                $elem
                    .removeClass(classListToRemove.join(" "))
                    .addClass(classList.join(" "));
            }
            return $elem;
        };

모든 클래스가 재설정되는 것은 아니며 필요한 것만 제거합니다.

일치하지 않는 클래스 만 제거해야하는 프로젝트에서 필요했습니다.

당신은 그것을 사용할 수 있습니다 $(".third").removeClassesExceptThese(["first", "second"]);