如何用jQuery为一个已经有类的元素添加新的类

  • Post category:jquery

当需要为已有类的元素添加新的类时,可以使用jQuery的addClass()方法,该方法可以向元素添加一个或多个类名:

$(element).addClass('new-class');

上述代码的意思是向一个名为element的元素添加一个名为new-class的新类。

如果想要同时添加多个类名,可以用空格隔开它们:

$(element).addClass('new-class1 new-class2');

上述代码在添加new-class1new-class2类名时,使用了空格间隔两个类名。这样做的效果是为名为element的元素同时添加两个类名。

以下是两个完整的示例:

示例一

假设有这样一个元素:

<div class="original-class">原来的类</div>

现在需要为它添加新的类名new-class,可以使用以下代码:

$('.original-class').addClass('new-class');

上述代码中,使用了类选择器.original-class来选中元素,并使用addClass()方法添加了新类名new-class

添加后这个元素的代码将变成:

<div class="original-class new-class">原来的类</div>

示例二

假设有这样一个元素:

<p class="original-class1 original-class2">原来的类</p>

现在需要为它添加新的类名new-classanother-class,可以使用以下代码:

$('p.original-class1.original-class2').addClass('new-class another-class');

上述代码中,使用了类选择器p.original-class1.original-class2来选中元素,并使用addClass()方法添加了两个新类名new-classanother-class

添加后这个元素的代码将变成:

<p class="original-class1 original-class2 new-class another-class">原来的类</p>

以上就是用jQuery为一个已经有类的元素添加新的类的完整攻略。