Question

我有几个关于类的元素，我试图将每个li上的数字增加1

但是使用下面的方法会删除已经应用于div的类，是否有不同的方法可以做到这一点？

$('.list > li').each(function (index) {
    $(this).attr('class', (index + 1));
});

Answer 1

您需要使用addClass()，而不是attr()方法：

$('.list > li').each(function (index) {
    $(this).addClass((index + 1).toString());
});

addClass()顾名思义，将类添加到元素的classList中;而使用attr()设置'class'属性会将class属性设置为传入的字符串。但是，您可以使用attr()可用的匿名函数：

$('.list > li').each(function () {
    $(this).attr('class', function (index, currentClasses) {
        return currentClasses + ' ' + (index + 1);
    });
});

然而，一个类名真的不应该，因为在CSS中选择元素的尴尬，从数字开始（尽管它在HTML 5下是有效的。）

Answer 2

问题一，你要覆盖整个class属性。要添加一个类而不影响其他类，可以使用jQuery的addClass。

$('.list > li').each(function (index) {
    $(this).addClass(index + 1));
});

问题二，您尝试将数字添加为类 - 除非您的doctype适用于HTML5，否则类不能以数字开头。

Answer 3

如果您尝试添加包含索引的额外类，请使用.addClass()方法

$('.list > li').each(function (index) {
    $(this).addClass((index + 1).toString());
});

在http://jsfiddle.net/87x7huqk/2/

更新了演示

jQuery attr正在删除类

3 个答案: