Question

在jQuery中，是否建议在添加该类之前检查某个类是否已分配给该元素？它甚至会产生任何影响吗？

例如：

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

如果怀疑是否已将baz课程分配给label，这是否是最佳方法：

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

或者这就够了：

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

Answer 1

只需致电addClass()即可。 jQuery会为你做检查。如果您自己检查，那么您的工作量会增加一倍，因为jQuery将仍然为您运行检查。

Answer 2

在控制台中进行简单的检查会告诉您，使用同一个班级多次调用addClass是安全的。

具体来说，您可以在the source

中找到支票

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

Answer 3

这个问题引起了我的注意another which was marked as a duplicate of this one。

这个答案总结了接受的答案，并附加了一些细节。

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

通过JavaScript操作DOM元素，不可能在class属性中具有重复的类名。如果您的HTML中有class="collapse"，则调用Element.classList.add("collapse");将不会添加额外的崩溃类。我不知道底层实现，但我认为它应该足够好。
JQuery在其addClass和removeClass实现中进行了一些必要的检查（我检查了source code）。对于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;
        }
    };
})());

顺便说一句，如果您因滚动位置的变化而切换课程，强烈建议您throttle滚动事件处理。

Answer 4

$("label")
  .not(".foo")
  .addClass("foo");

在添加之前检查类是否已分配

4 个答案: