jQuery 的 addClass() 没有正确修剪是否有特殊原因？答案

【问题标题】：Is there a particular reason why jQuery's addClass() is not right-trimming?jQuery 的 addClass() 没有正确修剪是否有特殊原因？
【发布时间】：2012-01-04 20:55:04
【问题描述】：

<div id="myDiv" class=" blueberry mango "></div>

如果我们使用.addClass()

$("#myDiv").addClass("carrot");

myDiv 的类现在是 "(no-space)blueberry mango(double-space)carrot"

有一个left-trim，但是芒果和胡萝卜之间有两个空格，因为没有right-trim

jQuery 的addClass() 不是有特殊原因吗右修剪？
还是根本就没有左修剪？

【问题讨论】：

我猜这与速度有关。这会导致错误吗？
这应该不会导致任何错误，那么这真的很重要吗？
这仍然是一个有趣的问题。
编辑：我改进了 yopur jsFiddle 以获得更好的视图
仅供参考，在课程之间偶尔有额外的空间应该没什么大不了的。

标签： jquery trim addclass

【解决方案1】：

似乎 jQuery 在添加类后正在进行修剪。请参阅下面的 jquery addclass 代码，

addClass: function( value ) {
    var classNames, i, l, elem,
        setClass, c, cl;

    if ( jQuery.isFunction( value ) ) {
        return this.each(function( j ) {
            jQuery( this ).addClass( value.call(this, j, this.className) );
        });
    }

    if ( value && typeof value === "string" ) {
        classNames = value.split( rspace );

        for ( i = 0, l = this.length; i < l; i++ ) {
            elem = this[ i ];

            if ( elem.nodeType === 1 ) {
                if ( !elem.className && classNames.length === 1 ) {
                    elem.className = value;

                } else {
               //HERE IS APPENDS ALL CLASS IT NEEDS TO ADD
                    setClass = " " + elem.className + " ";

                    for ( c = 0, cl = classNames.length; c < cl; c++ ) {
                        if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
                            setClass += classNames[ c ] + " ";
                        }
                    }
                    elem.className = jQuery.trim( setClass );
                }
            }
        }
    }

    return this;
}

所以它就像下面，

jQuery.trim(" blueberry mango " + " " + "carrot")

【讨论】：

【解决方案2】：

这是因为 jQuery 将类附加到类列表中，然后在整个字符串上运行 trim。

看看source for addClass 看看发生了什么。

【讨论】：

【解决方案3】：

查看来源，我猜没有理由这样做：

setClass = " " + elem.className + " ";

for ( c = 0, cl = classNames.length; c < cl; c++ ) {
    if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
        setClass += classNames[ c ] + " ";
    }
}
elem.className = jQuery.trim( setClass );

没错，在每个类之前和之后都有一个空格有助于查找新类（正在添加的）是否已经存在，但他们仍然可以将第一行替换为：

setClass = " " + jQuery.trim(elem.className) + " ";

它仍然会以同样的方式工作......

【讨论】：