Change CSS class name dynamically

Question

I need to change the CSS class name of all the elements in a page with a particular class name (.k-textbox). I tried the below code but it does not hit inside the .each() function

<script>
    $(document).ready(function () {    
        $(".k-textbox").each(function () {
            //alert("a");
            $(this).removeClass("k-textbox");
            $(this).addClass("input-medium");
        });
    });
    </script>

In the page i have a 3rd party grid control. the CSS class i have mentioned is inside that third party grid control.

below is the DOM object:

enter image description here

Show us your html? maybe you have the class wrong or something — Henk Jansen
– Henk Jansen, Commented Oct 23, 2013 at 10:17
Although you don't need the each, this should work. Please add your HTML and any other JS code to the question so we can see what's happening. — Rory McCrossan
– Rory McCrossan, Commented Oct 23, 2013 at 10:18
Are those elements in the DOM created after the page has been loaded? — Rory McCrossan
– Rory McCrossan, Commented Oct 23, 2013 at 10:25

Setthase · Accepted Answer · 2013-10-23 10:34:53Z

6

You should try to use chaining API provided by jQuery library:

$(".k-textbox").removeClass("k-textbox").addClass("input-medium");

edit:

As long as the elements are created dynamically you could try to run this code after those elements are created. But if you don't know when they are inserted into the code and doesn't have control over them you could try write simple watch function, i.e:

var watchTimer = setInterval(function () {
      var inputs = $('.k-textbox');
      if (inputs.length) {
          // clear interval
          clearInterval(watchTimer);

          // change class
          inputs.removeClass("k-textbox").addClass("input-medium");
      }
    }, 100);

edited Oct 23, 2013 at 10:34

answered Oct 23, 2013 at 10:17

Setthase

14.5k2 gold badges29 silver badges30 bronze badges

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

3 Comments

Rory McCrossan Over a year ago

While this is better syntax, logically it's no different to what the OP has. I'm not sure why it's being upvoted?

Setthase Over a year ago

@chamara - does that inputs created dynamically after DOM is ready? And can you know when it's happen?

Setthase Over a year ago

Do you have control over that when they are inserted? (click some button, call some function, etc...)

Rituraj ratan · Accepted Answer · 2013-10-23 10:18:10Z

-1

use addClass() and removeClass()

$(".k-textbox").removeClass("k-textbox").addClass("input-medium");

answered Oct 23, 2013 at 10:18

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

Collectives™ on Stack Overflow

Change CSS class name dynamically

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related