当需要为已有类的元素添加新的类时,可以使用jQuery的addClass()
方法,该方法可以向元素添加一个或多个类名:
$(element).addClass('new-class');
上述代码的意思是向一个名为element
的元素添加一个名为new-class
的新类。
如果想要同时添加多个类名,可以用空格隔开它们:
$(element).addClass('new-class1 new-class2');
上述代码在添加new-class1
和new-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-class
和another-class
,可以使用以下代码:
$('p.original-class1.original-class2').addClass('new-class another-class');
上述代码中,使用了类选择器p.original-class1.original-class2
来选中元素,并使用addClass()
方法添加了两个新类名new-class
和another-class
。
添加后这个元素的代码将变成:
<p class="original-class1 original-class2 new-class another-class">原来的类</p>
以上就是用jQuery为一个已经有类的元素添加新的类的完整攻略。