it-swarm.cn

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

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

例如:

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

如果怀疑baz类是否已经分配给label,那么这是最好的方法:

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

或者这就足够了:

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

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

165
jmar777

在控制台中进行简单的检查会告诉您,使用相同的类多次调用addClass是安全的。

具体你可以找到签到 来源

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

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

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

您正试图通过避免不必要的检查进行优化,在这方面,您必须注意以下因素:

  1. 通过JavaScript操作DOM元素,不可能在class属性中具有重复的类名。如果您的HTML中有class="collapse",则调用Element.classList.add("collapse");将不会添加额外的collapseclass。我不知道底层实现,但我认为它应该足够好。
  2. JQuery在其addClassremoveClass实现中进行了一些必要的检查(我检查了 源代码 )。对于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 滚动事件处理。

4
Igwe Kalu
$("label")
  .not(".foo")
  .addClass("foo");