changing the class name of a div in jquery

Question

When clicked the button I want to get change the name of the class of li under mycontent div. Is there a way to do that? my codes are below.

<div id="mycontent">
    <ul id="sortable">
    <li id="1" class="myclass">Item 1</li>
    <li id="2" class="myclass2">Item 2</li>
    <li id="3" class="myclass3">Item 3</li>
    <li id="4" class="myclass4">Item 4</li>
    </ul>
</div>

$(document).ready(function()
    {
  $("#submit_prog").click(
      function()            
          {                    
            $.ajax(
             {
              type: "POST",
              url: "sort2.php",                            

             });    
         });
     });

@gdoron , you are absolutely correct , can not use numbers for id — Kanishka Panamaldeniya, Mar 01 '12 at 14:01
*"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")."* Read [this](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — gdoron, Mar 01 '12 at 14:02

Code Jockey · Answer 1 · 2012-03-01T14:08:11.680

3

I'm pretty sure the jQuery would be something like:

$("#mycontent li.myclass2").removeClass("myclass2").addClass("myOtherClass2");

...etc for each li element.

if you wanted to change the class of all of li the elements, use this:

$("#mycontent li").removeClass("myclass myclass2 myclass3 myclass4").addClass("myOtherClass2");

you would add that to a click event on the button (in this example with id myClassChangeButton):

$("#myClassChangeButton").click(function(){
    $("#mycontent li.myclass").removeClass("myclass").addClass("myOtherClass");
    $("#mycontent li.myclass2").removeClass("myclass2").addClass("myOtherClass2");
    $("#mycontent li.myclass3").removeClass("myclass3").addClass("myOtherClass3");
    $("#mycontent li.myclass4").removeClass("myclass4").addClass("myOtherClass4");
});

edited Mar 01 '12 at 14:08

answered Mar 01 '12 at 13:53

Code Jockey

6,611
6
33
45

Is there a way to use jquery codes above in sort2.php? Because I want to execute it in server side. – user1077300 Mar 01 '12 at 14:39
If I understand your question, as far as I know, there is no way to use jQuery code or even anything similar on the server side - it is a _browser_-based (DOM-manipulating) _JavaScript_ framework. There is no PHP implementation. -- on that note, if you're asking how to do this server side (where there's no DOM) I'm not sure why you wouldn't just use PHP scriptlets to set the class -- I might not understand your question, though. – Code Jockey Mar 01 '12 at 15:09

Fabian · Answer 2 · 2012-03-01T14:30:58.480

1

Use this to change the class myclass2 from a li element in the div with the id mycontent:

$('#button').click(function(){
    $('#mycontent li.myclass2').removeClass().addClass('newClass');
});

Edit:

Code Jockey mentioned that this will remove all classes from the li element with .myclass2 That's right, so for future readers, this will only remove .myclass2:

$('#mycontent li.myclass2').removeClass('myclass2').addClass('newClass');

edited Mar 01 '12 at 14:30

answered Mar 01 '12 at 13:55

Fabian

3,465
4
34
42

1

bear in mind this will remove all classes from the list items (if there are more than one class on each) which doesn't apply to the example, but might apply in the actual situation. – Code Jockey Mar 01 '12 at 14:09
Thank you for mentioning this, I edited the answer for future readers! +1 for your answer. – Fabian Mar 01 '12 at 14:31

score 0 · Answer 3 · answered Mar 01 '12 at 13:53

0

Yes. Try this:

$('.button').click(function(){
     $('li#4') .removeClass();
     $('li#4').addClass('your_class')
});

Something along this lines should work

answered Mar 01 '12 at 13:53

jribeiro

3,387
8
43
70

changing the class name of a div in jquery

3 Answers3