7
<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?
5
  • 1
    I'm guessing it has to do with speed. Is this causing an error?
    – sissonb
    Jan 4, 2012 at 20:57
  • 3
    This shouldn't cause any errors, so does it really matter?
    – gen_Eric
    Jan 4, 2012 at 21:02
  • It is an interesting question nonetheless.
    – PeeHaa
    Jan 4, 2012 at 21:02
  • Editer: I improved yopur jsFiddle for a better view
    – ajax333221
    Jan 4, 2012 at 21:04
  • 1
    FYI, it should be no big deal to have an occasional extra space between classes.
    – jfriend00
    Jan 4, 2012 at 21:06

3 Answers 3

7

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

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.

0

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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.