change class name in jquery

Question

am making a site, I have menu as components in ascx.

I want to change my class name to different name;

this is my code:

<div id="mainMenu" style="float: left;">
    <ul class="level1 static">
        <li class="menu" style="position: relative;">test </li>
        <li class="menu" style="position: relative;">test </li>
        <li class="menu" style="position: relative;">test </li>
        <li class="menu" style="position: relative;">test </li>
    </ul>
</div>

for one of the page, I want to add my own style to the menu li. so I want all classes changed to:

class="apple" 
class="grape" 
class="bannana"
class="orange"

how will I do this in jquery

<script type="text/javascript">
    // ?
</script>

you need to distinguish between your li first. as in give them different classnames or ids. — Zaki, May 30 '14 at 13:54
@al123 ofcourse you can with $("menu").removeClass("menu").addClass("orange"); but you need unique id/class otherwise it will do it for all classes. — Zaki, May 30 '14 at 13:56
If this is an ascx, why aren't you changing the classes where the menu is generated (server-side)? This seems a really bad thing to do client-side as it is hard-wired to depend on the content and order. — iCollect.it Ltd, May 30 '14 at 14:00

Ram · Accepted Answer · 2014-05-30T14:06:16.693

5

If you want to change the entire className attributes you can use the attr method and if you want to add classes you can use the addClass method. Both methods accept callback function which is executed for each selected element, you can use an array and the first parameter of the callbacks for modifying the class attributes:

var cls = ["apple", "grape", "bannana", "orange"];

$(document).ready(function() {
    $('#mainMenu .level1 > li').addClass(function(i) {
        return cls[i];
    }); 
});

edited May 30 '14 at 14:06

answered May 30 '14 at 13:58

Ram

143,282
16
168
197

Works, but the whole situation seems contrived. Why does nobody stop to question *why this is not done server-side*? :) – iCollect.it Ltd May 30 '14 at 14:02
is there a reason why it doesnt take affect, when i inspect element it still shows as menu for all classes, even though in page souce it shows the fuction – al123 May 30 '14 at 14:05
@al123 wrap the whole thing inside $(function() { }); – Zaki May 30 '14 at 14:06
No, the problem is that he is looking for .remove class first and add the new class see this fiddle. http://jsfiddle.net/8bYaG/ – Wilfredo P May 30 '14 at 14:07
its still not updating, iv put it in a script aswell – al123 May 30 '14 at 14:27
@al123 What do you mean by "in aspx page"? I'm not ASP developer, so I don't know how scripts are loaded by that framework, but generally JavaScript code are executed by browser's JS interpreter, so that doesn't change anything. It works for me http://jsfiddle.net/5fepC/, you should do some basic debugging in your page which is beyond the scope of this question. Please check http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code – Ram May 30 '14 at 14:36

score 1 · Answer 2 · answered May 30 '14 at 13:59

1

$(function(){
    $("ul li:nth-child(1)").addClass("orange");
    $("ul li:nth-child(2)").addClass("apple");
    $("ul li:nth-child(3)").addClass("foo");
    $("ul li:nth-child(4)").addClass("bar");
})

answered May 30 '14 at 13:59

IIvanov

137
2
11

Works, but the whole situation seems contrived. Why does nobody stop to question *why this is not done server-side*? :) – iCollect.it Ltd May 30 '14 at 14:03
good point :) but I think it's too obvious to be as simple as that :D – IIvanov May 30 '14 at 14:05
how do i add this on aspx – al123 May 30 '14 at 14:43
put it in a script tag – IIvanov May 30 '14 at 14:51

topless · Answer 3 · 2014-05-30T14:12:25.553

This will iterate on your li's and will add whatever they have as visible text value as a class in lowercase, like this you don't have to worry about the order and you can control it from your markup.

<li class="menu">Apple</li>
<li class="menu">Orange</li>


$('.level1 li').each(function() {
    $(this).addClass($(this).text().toLowerCase());
});

If you want to remove the menu class first you can simply chain it in the above command, like that.

$(this).removeClass('menu').addClass($(this).text().toLowerCase());

score 0 · Answer 4 · answered May 30 '14 at 13:55

0

You can change the class using .addClass and .removeClass:

// remove class
$("li").removeClass("menu")

// add clasd
$("li").addClass("orange");

jQuery API:

answered May 30 '14 at 13:55

code4coffee

677
4
13

but now how will i add apple – al123 May 30 '14 at 13:58
$("li").addClass("apple"); - are you trying to keep some sort of ordering with the above? Your question just listed classes. – code4coffee May 30 '14 at 14:00
at the moment my classes are all menu, but i need to change them all to different names. if i remove menu, and add orange then they all will be orange but i dont want them all to be orange – al123 May 30 '14 at 14:01
Do they need to maintain a specific order? If so, IIvanov's answer above retains the order they're in. If you're going to dynamically change them we'll need to know more about how/when they should be changed. – code4coffee May 30 '14 at 14:02
1

You can chain them and make it look like this `$('li').removeClass("menu").addClass("orange");` – topless May 30 '14 at 14:13
how do i add this in aspx – al123 May 30 '14 at 14:43

change class name in jquery

4 Answers4