动态更改CSS类名称

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:

Answer 1

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, ie:

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);

Answer 2

使用addClass（）和removeClass（）

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