Javascript change class of an element

Question

I have ul list and I need to change the class of one of <li> tags with javascript:

<ul>
  <li>...</li>
  <li class="something"> <- need to change this class to "myclass" (javascript goes here)</li>
  <li>..</li>
</ul>

Thank you.

Answer 1

using jQuery (naturally):

$(function(){
    $("li.something").removeClass("something").addClass("myclass");
});

Answer 2

Using JQuery:

$('ul li:nth-child(2)').attr('class', 'myclass');

Answer 3

Using regular javascript:

var listitems = document.getElementsByTagName("li");
for (int i = 0; i < listitems.length; i++)
{
   if (listitems[i].className == "something")
   {
      listitems[i].className = "new class name";
      break;
   }
}

If your <li> tag had an id attribute, it would be easier, you could just do

document.getElementById("liID").className = "newclassname";

Answer 4

As there seems to be alot of jquery answers and it's not always possible to use jquery (for example if your customer/company won't let you use it arrgh!), here is a plain javascript example.

// Where 'e' is the element in question, I'd advise using document.getElementById
// Unless this isn't possible.

// to remove
if ( e.className.match(/something/) ) {
    e.className = e.className.replace("something", "")
}

// to add back in
if ( !e.className.match(/something/) ) {
    e.className += " something"
}

This will work with multiple classes, for example:

<li class="something another">...</li>