jquery change class name

Question

I want to change the class of a td tag given the td tag s id    lt td id  td id  class  change me  gt        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

User · Answer

You can do This        td id   removeClass  Old class        td id   addClass  New class    Or You can do This       td id   removeClass  Old class   addClass  New class

User · Answer

EDIT   If you re saying that you re changing it from a nested element  you don t need the ID at all  You can do this instead     this  closest  td   toggleClass  change me some other class          or   this  parents  td first   toggleClass  change me some other class       http   api jquery com closest  http   api jquery com parents      Original answer       td id   removeClass  change me   addClass  some other class      Another option is       td id   toggleClass  change me some other class

User · Answer

change class using jquery  try this      selector id   attr  class   new class      you can also set any attribute using this query      selector id   attr  Attribute Name   Attribute Value

User · Answer

You can check out addClass or toggleClass

User · Answer

So you want to change it WHEN it s clicked   let me go through the whole process  Let s assume that your  External DOM Object  is an input  like a select   Let s start with this HTML    lt body gt     lt div gt       lt select id  test  gt         lt option gt Bob lt  option gt         lt option gt Sam lt  option gt         lt option gt Sue lt  option gt         lt option gt Jen lt  option gt       lt  select gt     lt  div gt      lt table id  theTable  gt       lt tr gt  lt td id  cellToChange  gt Bob lt  td gt  lt td gt Sam lt  td gt  lt  tr gt       lt tr gt  lt td gt Sue lt  td gt  lt td gt Jen lt  td gt  lt  tr gt     lt  table gt   lt  body gt    Some very basic CSS     theTable td       border 1px solid  555     activeCell       background-color  F00      And set up a jQuery event   function highlightCell useVal         theTable td   removeClass  activeCell          filter   contains    useVal       addClass  activeCell         document  ready function            test   change function e  highlightCell   this  val             Now  whenever you pick something from the select  it will automatically find a cell with the matching text  allowing you to subvert the whole id-based process   Of course  if you wanted to do it that way  you could easily modify the script to use IDs rather than values by saying    filter     useVal    and make sure to add the ids appropriately   Hope this helps

User · Answer

btn   click function             td id   removeClass            td id   addClass  newClass         or      btn   click function             td id   removeClass   addClass  newClass

User · Answer

this method works well for me      td id   attr  class   new class

User · Answer

In the event that you already have a class and need to alternate between classes as oppose to add a class  you can chain toggle events      li multi   click function e          this  toggleClass  opened   toggleClass  multi-opened

User · Answer

I think you re looking for this       td id   removeClass  change me   addClass  new class

User · Answer

You can set the class  regardless of what it was  by using  attr    like this       td id   attr  class    newClass      If you want to add a class  use  addclass   instead  like this       td id   addClass  newClass      Or a short way to swap classes using  toggleClass         td id   toggleClass  change me newClass      Here s the full list of jQuery methods specifically for the class attribute

User · Answer

I better use the  prop to change the className and it worked perfectly      td id  prop  className   newClass      for this line of code you just have to change the name of newClass  and of course the id of the element  in the next exemple   idelementinyourpage     idelementinyourpage  prop  className   newClass      By the way  when you want to search which style is applied to any element  you just click F12 on your browser when your page is shown  and then select  in the tab of DOM Explorer  the element you want to see  In Styles you now can see what styles are applied to your element and from which class its reading

User · Answer

I think he wants to replace a class name   Something like this would work      document  ready function            blue   removeClass  blue   addClass  green          from http   monstertut com 2012 06 use-jquery-to-change-css-class

[jquery] jquery change class name

Examples related to jquery

Examples related to css