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

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

32

Eu acho que ele quer substituir um nome de classe.

Algo assim funcionaria:

$(document).ready(function(){
    $('.blue').removeClass('blue').addClass('green');
});

de http://monstertut.com/2012/06/use-jquery-to-change-css-class/

— jack
fonte

Mas ele queria fazê-lo dentro do evento clique de algum outro dom objeto

— Keyser

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

Você pode conferir addClass ou toggleClass

— Karl Johan
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