Jquery - Select and Replace CSS class

Question

I have a little piece of code like this:

<div class="content">
    <form id="frmButtons">
        <div id="datagrid">
            <div id="wrapper">
                <div class="ColVis">
                    <button class="ColVis_Button ColVis_MasterButton ui-button ui-state-default">
                        <span>Change Columns</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

My button does not have an ID or name. How do I select and replace the "class" attribute of that button? I am trying this, but it doesn't work.

$("div.Colvis button").toggleClass("newButtonClass");

Why? I just need to replace the CSS class "ColVis_Button ColVis_MasterButton ui-button ui-state-default" with a class called "newButtonClass" for the button in my form using JQuery — Jake
– Jake, Commented May 9, 2014 at 18:24
@Jake for completeness so that anyone else attempting to perhaps hide a div or button would also benefit from this question as it stands this is just a typo issue. — abc123
– abc123, Commented May 9, 2014 at 18:32

Zachary Wright · Accepted Answer · 2014-05-09 18:25:02Z

2

If you want to completely change the class of the button:

$("div.ColVis > button").prop('class', 'newButtonClass');

If you want to add a new class while retaining the current classes:

$("div.ColVis > button").addClass('newButtonClass');

The > looks for children of the first selector.

answered May 9, 2014 at 18:25

Zachary Wright

24.3k11 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jake Over a year ago

Thanks ! I just need to replace the entire class. Your solution works great ! :)

MMhunter · Accepted Answer · 2014-05-09 18:30:52Z

2

I believe that your code won't work merely because you have a typo in the class name "ColVis" (instead of "Colvis"). It's case-sensitive.

answered May 9, 2014 at 18:30

MMhunter

1,4511 gold badge12 silver badges18 bronze badges

Comments

tymeJV · Accepted Answer · 2014-05-09 18:25:34Z

0

toggleClass only affects the class you pass in, in your case it only adds newButtonClass - If you want to toggle all the other classes off, include them as an argument:

$("div.Colvis button").toggleClass("newButtonClass ColVis_Button ColVis_MasterButton ui-button ui-state-default");

If the class is present at the time of this call, it's removed, and if not present, then it's added.

answered May 9, 2014 at 18:25

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

abc123 · Accepted Answer · 2014-05-09 18:28:54Z

jsfiddle

Description

First I added an event binding so that when the button is clicked something happens.

$("div .ColVis button").click(function(e){

Next we needed to toggle the class:

$(this).toggleClass("newButtonClass");

Since we are already in an event of the item we are wanting this keyword literally means the button element.

html

<div class="content">
    <form>
        <div id="datagrid">
            <div id="wrapper">
                <div class="ColVis">
                    <button class="ColVis_Button ColVis_MasterButton ui-button ui-state-default">
                        <span>Change Columns</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

jQuery:

$("div .ColVis button").click(function(e){
    $(this).toggleClass("newButtonClass");
    //This line is to show it works in the console
    console.log($(this).attr('class'));
});

Collectives™ on Stack Overflow

Jquery - Select and Replace CSS class

4 Answers 4

1 Comment

Comments

Comments

jsfiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related