Удаление класса

Материал из JQuery

Перейти к: навигация, поиск
.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="http://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, class){
            if(index != 2)
		return "colored";
	    else
		return "";
	}
    );
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

См. также

Ссылки

Поисковые ключи:
  • удаление класса у элементов
  • удалить классы
  • убрать класс у элементов
  • .removeClass()
  • removeClass()