Удаление класса
.removeClass()
Удаляет заданные классы у элементов на странице. Функция имеет несколько вариантов использования:
.removeClass():jQuery1.0
удаляет все классы у выбранных элементов.
.removeClass("class1 class2 ..."):jQuery1.0
удаляет классы class1, class2, ... у выбранных элементов.
.removeClass(function(index, class)):jQuery1.4
удаляет классы, список которых возвращает заданная пользователем функция. Возвращаемое ей значение должно представлять из себя строку с перечислением классов через пробел. Функция вызывается отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента |в наборе, class — текущий класс(ы) элемента.
Примеры использования:
$("#content").removeClass( ) | удалит все классы у элемента с идентификатором content |
$(".content").removeClass("clName1 clName2") | удалит классы clName1 и clName2 (если, конечно, такие классы имеются) у элементов с классом content |
В действии
Пример демонстрирует работу функции removeClass с пользовательской функцией в качестве параметра. Удалим классы colored у всех элементов списка, кроме элемента, с индексом 2. Таким образом, цветным останется только он.
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ #list{ width:260px; } .item{ width: 250px; height: 20px; margin: 2px; padding: 3px; background-color: #eee; list-style-type:none; } .colored{ background-color: #cceecc; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item colored"~gt~0. Меркурий ~lt~/li ~gt~ ~lt~li class="item colored"~gt~1. Венера ~lt~/li ~gt~ ~lt~li class="item colored"~gt~2. Земля ~lt~/li ~gt~ ~lt~li class="item colored"~gt~3. Марс ~lt~/li ~gt~ ~lt~li class="item colored"~gt~4. Юпитер ~lt~/li ~gt~ ~lt~li class="item colored"~gt~5. Сатрурн ~lt~/li ~gt~ ~lt~li class="item colored"~gt~7. Уран ~lt~/li ~gt~ ~lt~li class="item colored"~gt~8. Нептун ~lt~/li ~gt~ ~lt~li class="item colored"~gt~9. Плутон ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").removeClass( function(index){ if(index != 2) return "colored"; else return ""; } ); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
См. также
- .addClass( ) — добавление класса
- .toggleClass( ) — изменение наличия класса