在jquery中更改类名

Question

我正在创建一个网站,我在ascx中有菜单作为组件.

我想把我的班级名改为不同的名字;

这是我的代码:

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

对于其中一个页面,我想将自己的样式添加到菜单li中.所以我希望所有课程都改为:

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

我将如何在jquery中执行此操作

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

Answer 1

如果要更改整个className属性,可以使用该attr方法,如果要添加类,可以使用该addClass方法.两种方法都接受为每个选定元素执行的回调函数,您可以使用数组和回调的第一个参数来修改class属性:

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

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