如何使用 jQuery 为元素设置类？不想添加/删除类答案

【问题标题】：How can I set the class for an element using jQuery? Don't want to add/remove classes如何使用 jQuery 为元素设置类？不想添加/删除类
【发布时间】：2011-04-27 17:56:43
【问题描述】：

我需要为页面中的元素设置类。使用纯 JavaScript，我会写如下内容：

document.getElementById('foo').className = "my_class";

这只是设置类，这正是我想要的。但是我在我的页面上使用 jQuery，所以想以“jQuery 方式”来做这件事，因为混合旧样式和 jQuery 样式似乎很奇怪。但是 jQuery 显然只允许你使用 addClass() 或 removeClass()，像这样：

$('#foo').addClass("my_class");

问题在于它只是为元素添加了一个类，它并没有替换当前存在的类。这是否意味着我必须跟踪旧课程并首先执行 removeClass() ？有没有办法告诉jQuery不管它是什么替换当前的类，只用一个新的替换它？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

从一个元素中删除所有类：

$('#foo').removeClass();

不为 removeClass 指定参数会删除所有类。所以你的解决方案是：

$('#foo').removeClass().addClass('my_class');

【讨论】：

如果您真的想使用“类”函数然后链接您的操作，无需重新实例化一个新的$('#foo') 对象：$('#foo').removeClass().addClass('my_class'); -1 未优化且未真正回答问题（此解决方案已在问题中解释）
其实我觉得他确实很好地回答了我的问题：removeClass() 函数是我不知道的关键。所以，我认为这是一个很好的答案。
是的，对不起，我以为你已经知道 removeClass() 会删除任何现有的类，因为你在你的问题中像这样乱写它;-) 无论如何，优化部分很重要，你必须尽可能使用方法链接。
是的，否则你在 DOM 中进行两次查找。

【解决方案2】：

直接使用.attr()设置class属性：

$('#foo').attr('class', 'my_class');

【讨论】：

【解决方案3】：

您可以像这样使用.attr() 函数：

$('#foo').attr('class', 'my_class');

【讨论】：

【解决方案4】：

你可以使用它：

$('#foo').attr('class', 'my_class');

它将用“my_class”替换任何类

【讨论】：

【解决方案5】：

 $('#foo').removeClass().addClass('my_class');

【讨论】：

【解决方案6】：

啊，在我发布问题几秒钟后就找到了答案。显然我的谷歌技能不够...... :-(

无论如何，答案在 removeClass() 函数中。所以，你可以这样做：

$('#foo').removeClass().addClass("my_class");

再简单不过了。

【讨论】：

哇，你们真快：当我自己打出答案时，你们中的几个人已经回答了！谢谢！
如何使用attr() 不简单？它只是一个方法调用，而不是两个单独的调用。
attr() 更简单，可能更快，但我手头没有基准。

【解决方案7】：

你可以试试.toggleClass()

【讨论】：

不行，如果你不知道当前班级的名字，那也没用。