jquery alterar o nome da classe

336

Eu quero mudar a classe de uma tag td, dada a identificação da tag td:

<td id="td_id" class="change_me"> ...

Quero poder fazer isso enquanto estiver dentro do evento click de algum outro objeto dom. Como pego o ID do td e altero sua classe?

jquery css aeq
fonte

Respostas:

704

Você pode definir a classe (independentemente do que era ) usando .attr(), desta forma:

$("#td_id").attr('class', 'newClass');

Se você deseja adicionar uma classe, use o .addclass()seguinte:

$("#td_id").addClass('newClass');

Ou uma maneira curta de trocar de classe usando .toggleClass():

$("#td_id").toggleClass('change_me newClass');

Aqui está a lista completa dos métodos do jQuery especificamente para o classatributo .

Nick Craver
fonte
Hey @Nick, adicione um manipulador de eventos que encontre o primeiro pai td [ var $td = $(this).parents('td:first')] e obtenha seu id [ var id = $td.attr('id');] e também a classe [ var class = $td.attr('class');] porque ele deseja que um elemento de clique dentro do TD o ative
Bob Fincheimer
@ Bob - Eu não sigo, de onde você está tirando isso, outra pergunta? Este diz que ele tem o ID do elemento :) Também para obter um pai que você pode usar .closest('td')em vez de .parents('td:first'):)
Nick Craver
11
sua última frase: I want to be able to do this while inside the click event of some other dom object. How do I grab the td's id and change its class?- Talvez eu estou lendo errado, talvez ele quer dizer usar o id do td para alterar a classe ...
Bob Fincheimer
11
@Bob - Certo ... alguns outro objeto DOM, você está assumindo esse objeto está dentro do <td>em questão :)
Nick Craver
Observe que a change_mepeça é opcional se você usartoggleClass()
sakisk
93

Eu acho que você está procurando por isso:

$('#td_id').removeClass('change_me').addClass('new_class');
Fosco
fonte
9

Você pode fazer isso: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); Ou você pode fazer isso

$("#td_id").removeClass('Old_class').addClass('New_class');
Alireza Masali
fonte
6

Então, você deseja alterá-lo QUANDO clicada ... deixe-me passar por todo o processo. Vamos supor que o seu "Objeto DOM externo" seja uma entrada, como uma seleção:

Vamos começar com este HTML:

<body>
  <div>
    <select id="test">
      <option>Bob</option>
      <option>Sam</option>
      <option>Sue</option>
      <option>Jen</option>
    </select>
  </div>

  <table id="theTable">
    <tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
    <tr><td>Sue</td><td>Jen</td></tr>
  </table>
</body>

Algum CSS muito básico:

​#theTable td {
    border:1px solid #555;
}
.activeCell {
    background-color:#F00;
}

E configure um evento jQuery:

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});

Agora, sempre que você seleciona algo do select, ele encontra automaticamente uma célula com o texto correspondente, permitindo subverter todo o processo baseado em id. Obviamente, se você quiser fazer dessa maneira, poderá modificar facilmente o script para usar IDs em vez de valores dizendo

.filter("#"+useVal)

e certifique-se de adicionar os IDs adequadamente. Espero que isto ajude!

Trafalmadorian
fonte
4

EDITAR:

Se você está dizendo que está mudando de um elemento aninhado , não precisa do ID. Você pode fazer isso:

$(this).closest('td').toggleClass('change_me some_other_class');
    //or
$(this).parents('td:first').toggleClass('change_me some_other_class');

Resposta original:

$('#td_id').removeClass('change_me').addClass('some_other_class');

Outra opção é:

$('#td_id').toggleClass('change_me some_other_class');
user113716
fonte
Eu não acho que o OP está dentro do <td>, embora ele possa ser, re-ler atentamente :)
Nick Craver
@ Nick - Sim, eu adicionei a atualização porque a li novamente e vi que o OP estava perguntando "Como faço para pegar o ID do td e alterar ..." . Isso me levou a acreditar que o OP não identifica o ID, o que tornaria minha resposta original não muito útil. Diante disso, estou assumindo que o elemento com o manipulador está aninhado. Mas certamente é uma suposição.
precisa saber é o seguinte
2

No caso de você já ter uma classe e precisar alternar entre classes, em vez de adicionar uma classe, é possível encadear eventos de alternância:

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});
lentyai
fonte
2 
$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});
Prabhu
fonte
1

esse método funciona bem para mim

$('#td_id').attr('class','new class');
Puterafx Fx
fonte
Faça alguns detalhes sobre isso.
aeronave
0

alterar classe usando jquery

tente isso

$('#selector_id').attr('class','new class');

você também pode definir qualquer atributo usando esta consulta

$('#selector_id').attr('Attribute Name','Attribute Value');
Love Kumar
fonte
-1

É melhor eu usar o .prop para alterar o className e funcionou perfeitamente:

$(#td_id).prop('className','newClass');

para esta linha de código, basta alterar o nome de newClass e, é claro, o ID do elemento, no próximo exemplo: idelementinyourpage

$(#idelementinyourpage).prop('className','newClass');

A propósito, quando você deseja pesquisar qual estilo é aplicado a qualquer elemento, basta clicar em F12 no seu navegador quando sua página é exibida e selecionar na guia do DOM Explorer o elemento que deseja ver. Em Estilos, agora você pode ver quais estilos são aplicados ao seu elemento e de qual classe sua leitura.

Alexis Gassan
fonte