jquery - 链接jQuery添加类方法会触发多次重排吗？

我想知道链接jquery函数是否触发多个重排，或者重排仅在语句结束后才发生一次。

$('label[hierarchyName="' + toolbarStatus.Years[i] + '"]').addClass('active').addClass('btn-success');

任何输入表示赞赏。谢谢。

最佳答案

它触发多次重排。链接就像在单个选择器上应用多种方法一样。每次添加类时，它都会重新生成DOM并呈现它。

在JSFiddle上给出了示例。 -http://jsfiddle.net/5kkCh/

就像

var obj = {
    first: function() { alert('first'); return obj; },
    second: function() { alert('second'); return obj; },
    third: function() { alert('third'); return obj; }
}

obj.first().second().third();

这是jQuery的addClass函数

addClass: function( value ) {
    var classes, elem, cur, clazz, j, finalValue,
        i = 0,
        len = this.length,
        proceed = typeof value === "string" && value;

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

    if ( proceed ) {
        // The disjunction here is for better compressibility (see removeClass)
        classes = ( value || "" ).match( rnotwhite ) || [];

        for ( ; i < len; i++ ) {
            elem = this[ i ];
            cur = elem.nodeType === 1 && ( elem.className ?
                ( " " + elem.className + " " ).replace( rclass, " " ) :
                " "
            );

            if ( cur ) {
                j = 0;
                while ( (clazz = classes[j++]) ) {
                    if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
                        cur += clazz + " ";
                    }
                }

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

    return this;
}

如果看到for循环，则每次调用addClass时，它都会更新类名（追加到现有类中）。

如果您引用由stubbornella（http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/）撰写的文章，则更改className可能导致重排。

我希望能解释:-)

关于jquery - 链接jQuery添加类方法会触发多次重排吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23781643/