¿Hay alguna razón en particular por la cual addClass() de jQuery no sea correcto?

Question

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

Si utilizamos el .addClass()

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

La clase de myDiv es ahora "(no-space)blueberry mango(double-space)carrot"

Hay una left-trim, pero hay espacios dobles entre el mango y la zanahoria porque no había right-trim

• ¿Hay alguna razón en particular por la cual jQuery's addClass() no es recorte a la derecha?
• ¿O el borde izquierdo ni siquiera estaba previsto?

Answer 1

Parece que jQuery está haciendo el ajuste después de agregar la clase. Ver código addClass jQuery continuación,

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

Así es como a continuación,

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

Answer 2

Esto sucede porque jQuery agrega la clase a la lista de clases y luego ejecuta trim en toda la cadena.

Eche un vistazo a source for addClass para ver qué está pasando.

Answer 3

En cuanto a la fuente, supongo que no hay razón para ello:

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

Verdadero , tener un espacio en blanco antes y después de cada clase ayuda a encontrar si la nueva clase (que se agrega) ya está allí o no, pero aún así podrían reemplazar la primera línea con:

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

y todavía funcionaría de la misma manera ...