检查添加前是否已经分配了类

在jQuery中，是否build议在添加该类之前检查一个类是否已经分配给元素？ 它会有什么效果吗？

例如：

<label class='foo'>bar</label> 

如果有疑问bazclass已经被分配到label ，这是最好的办法：

 var class = 'baz'; if (!$('label').hasClass(class)) { $('label').addClass(class); } 

或者这样就够了：

 $('label').addClass('baz'); 

Answer 1

只需调用addClass() 。 jQuery将为你做检查。 如果你自己检查，你的工作翻倍，因为jQuery 仍然会为你运行检查。

Answer 2

在控制台中的一个简单的检查会告诉你，多次调用addClass与同一个类是安全的。

具体来说，你可以在源头find支票

 if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) { setClass += classNames[ c ] + " "; } 

Answer 3

这个问题引起了我的注意，跟着另一个被标记为这个副本 。

这个答案总结了接受的答案，增加了一点细节。

您试图通过避免不必要的检查来优化，在这方面，您必须注意以下因素：

1. 通过JavaScript操作DOM元素，在class属性中不可能有重复的类名。 如果你的HTML中有class="collapse" ，调用Element.classList.add("collapse"); 不会添加额外的折叠类。 我不知道底层的实现，但我认为它应该足够好。
2. JQuery在其addClass和removeClass实现中进行了一些必要的检查（我检查了源代码 ）。 对于addClass ，进行一些检查之后，如果存在一个类，JQuery不会尝试再次添加它。 同样，对于removeClass ，JQuery在cur.replace( " " + clazz + " ", " " ); 只有存在时才会删除类。

值得注意的是，JQuery在removeClass实现中做了一些优化，以避免无意义的重新渲染。 它是这样的

 ... // only assign if different to avoid unneeded rendering. finalValue = value ? jQuery.trim( cur ) : ""; if ( elem.className !== finalValue ) { elem.className = finalValue; } ... 

所以你可以做的最好的微观优化是避免函数调用的开销和相关的实现检查。

假设你想切换一个名为collapse的类，如果你完全控制了什么时候该类被添加或删除，并且如果最初不存在这个collapse类，那么你可以优化如下：

 $(document).on("scroll", (function () { // hold state with this field var collapsed = false; return function () { var scrollTop, shouldCollapse; scrollTop = $(this).scrollTop(); shouldCollapse = scrollTop > 50; if (shouldCollapse && !collapsed) { $("nav .branding").addClass("collapse"); collapsed = true; return; } if (!shouldCollapse && collapsed) { $("nav .branding").removeClass("collapse"); collapsed = false; } }; })()); 

顺便说一句，如果由于滚动位置的变化而切换课程，强烈build议您调整滚动事件处理。