Is there a particular reason why jQuery's addClass() is not right-trimming?

Question

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

If we use the .addClass()

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

The class for myDiv is now "(no-space)blueberry mango(double-space)carrot"

There is a left-trim, but there are double spaces between mango and carrot because there were no right-trim

• Is there a particular reason why jQuery's addClass() is not right-trimming?
• Or the left-trim was not even intended?

Application

I'm guessing it has to do with speed. Is this causing an error? – Pratte

This shouldn't cause any errors, so does it really matter? – Boondocks

It is an interesting question nonetheless. – Modla

Editer: I improved yopur jsFiddle for a better view – Application

FYI, it should be no big deal to have an occasional extra space between classes. – Miterwort

Answer 1

Seems like jQuery is doing the trim after adding the class. See jquery addclass code below,

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;
}

So it's like below,

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

Foxhole

Answer 2

This is happening because jQuery is appending the class to the list of classes and then running trim on the entire string.

Have a look at the source for addClass to see what's going on.

Boondocks

Answer 3

Looking at the source, I'm guessing there's no reason for that:

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 );

True, having a whitespace before and after each class helps to find if the new class (being added) is already there or not, but still they could replace the first line with:

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

and it still would work the same way...

Patricide