Usuń wszystkie klasy oprócz jednej

89

Cóż, wiem, że za pomocą niektórych akcji jQuery możemy dodać wiele klas do konkretnego div:

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

Powiedzmy, że przy kilku kliknięciach i innych rzeczach element div otrzymuje wiele klas

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

Jak więc mogę usunąć wszystkie klasy oprócz jednej? Jedyny pomysł, jaki wpadłem, jest taki:

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

Podczas gdy removeClass()zabija wszystkie klasy, div zostaje schrzaniony, ale dodanie zaraz po tym addClass('cleanstate')wraca do normy. Innym rozwiązaniem jest umieszczenie atrybutu ID z podstawowymi właściwościami CSS, aby nie zostały usunięte, co również poprawia wydajność, ale chcę tylko poznać inne rozwiązanie, aby pozbyć się wszystkich oprócz ".cleanstate"

Pytam o to, ponieważ w prawdziwym skrypcie div podlega różnym zmianom klas.

javascript jquery class addclass removeclass DarkGhostHunter
źródło
Pobierz klasy, podziel je za pomocą " "(spacja) i zdecyduj dla każdego, czy chcesz je usunąć?
pimvdb

Odpowiedzi:

205

Zamiast robić to w 2 krokach, możesz po prostu zresetować całą wartość naraz attr, zastępując wszystkie wartości klas wybraną klasą:

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

Przykład: http://jsfiddle.net/jtmKK/1/

Yahel
źródło
33

Użyj atr, aby bezpośrednio ustawić atrybut klasy na określoną wartość, którą chcesz:

$('#container div.cleanstate').attr('class','cleanstate');
tvanfosson
źródło
15

W przypadku zwykłego starego JavaScript, a nie JQuery:

document.getElementById("container").className = "cleanstate";
Rob w TVSeries.com
źródło
4

Czasami musisz zachować niektóre klasy ze względu na animację CSS, ponieważ po usunięciu wszystkich klas animacja może nie działać. Zamiast tego możesz zachować niektóre zajęcia i usunąć resztę w następujący sposób:

$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');
Nizzy
źródło
Podoba mi się odpowiedź na usunięcie niektórych klas. Myślę, że kod mógłby być $('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');. Próbowałem edytować, ale po raz kolejny stackoverflow nie pozwala Ci być pomocnym.
goodeye
2

w związku z odpowiedzią Robsa i ze względu na kompletność można również użyć querySelector z wanilią

document.querySelector('#container div.cleanstate').className = "cleanstate";
obrabować
źródło
0

A co, jeśli chcesz zachować jedną lub więcej klas i chcesz mieć zajęcia poza tymi. To rozwiązanie nie zadziała, jeśli nie chcesz usuwać wszystkich klas, ponownie dodaj tę klasę perticular. Użycie attr i removeClass () powoduje zresetowanie wszystkich klas w pierwszej instancji, a następnie ponowne dołączenie tej klasy perticular. Jeśli użyjesz animacji na klasach, które są ponownie resetowane, zakończy się niepowodzeniem.

Jeśli chcesz po prostu usunąć wszystkie klasy z wyjątkiem niektórych, to jest to dla Ciebie. Moje rozwiązanie jest następujące: removeAllExceptThese

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;
        };

Nie spowoduje to zresetowania wszystkich klas, usunie tylko niezbędne.
Potrzebowałem tego w moim projekcie, gdzie musiałem usunąć tylko niepasujące klasy.

Możesz tego użyć $(".third").removeClassesExceptThese(["first", "second"]);

Nikt
źródło