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

Answer 2

$(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");
})

Answer 3

这会迭代你的li并将它们作为可见文本值添加为小写的类，这样你不必担心订单，你可以从你的标记中控制它。

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


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

如果你想首先删除菜单类，你可以在上面的命令中链接它，就像那样。

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

Answer 4

您可以使用.addClass和.removeClass：

更改类

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

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

jQuery API：

在jquery中更改类名

4 个答案: