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

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

몇 가지 jQuery 작업을 통해 특정 div에 많은 클래스를 추가할 수 있습니다.

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

몇 번의 클릭과 다른 것들로 디브는 많은 수업을 받습니다.

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

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

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

하는 동안에removeClass()모든 수업을 죽이고, 디브는 엉망이 되지만, 그 직후에 추가합니다.addClass('cleanstate')정상으로 돌아갑니다.다른 해결책은 기본 CSS 속성이 삭제되지 않도록 ID 속성을 넣는 것입니다. 이것은 성능을 향상시키기도 하지만, 저는 단지 ".cleanstate"를 제외한 모든 것을 제거할 수 있는 다른 해결책을 알고 싶습니다.

실제 대본에서 디브는 다양한 계급 변화를 겪기 때문에 이런 질문을 하는 것입니다.

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

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

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

특성을 사용하여 클래스 속성을 원하는 특정 값으로 직접 설정합니다.

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

JQuery가 아닌 일반적인 이전 JavaScript를 사용하는 경우:

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

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

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

답변을 강탈하는 것과 관련하여 그리고 완전성을 위해 당신은 또한 querySelector와 바닐라를 함께 사용할 수 있습니다.

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

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

일부 클래스를 제외한 모든 클래스를 제거하려면 이 옵션을 사용합니다.내 해결책은 다음을 위한 것입니다: 모든 예외 제거이것들

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"]);

언급URL : https://stackoverflow.com/questions/5363289/remove-all-classes-except-one