Adicionando uma classe a um elemento em jQuery
Lembro que no atributo
class
no código HTML, você pode escrever várias
classes separadas por espaço.
Vamos imaginar a seguinte situação - você quer
adicionar uma nova classe às existentes, sem sobrescrevê-las.
Neste caso, simplesmente fazer .attr('class', 'new-class')
não funcionará (usando o método
attr)
- você vai apagar as classes que
já existem no atributo.
Você poderia, claro, primeiro ler as classes
que estão lá, depois adicionar a nossa
classe a elas com um espaço e escrever tudo de volta
no atributo, mas há uma maneira mais fácil - no jQuery
existe um método para essas coisas, o
addClass.
O método addClass permite adicionar
uma classe a um elemento (ou elementos), sem sobrescrever
as outras classes. A classe que você
deseja adicionar ao elemento é aceita como
parâmetro deste método.
No próximo exemplo, temos um elemento com
duas classes - class="www zzz":
<p class="www zzz" id="test">texto</p>
Podemos adicionar a ele uma terceira classe -
kkk. Como resultado, o conteúdo do atributo
ficará assim - class="www zzz kkk":
$('#test').addClass('kkk');
O código HTML ficará assim:
<p class="www zzz kkk" id="test">texto</p>
Adicione a classe test a todos os li.
