Esiste un motivo particolare per cui addClass() di jQuery non sta ritagliando correttamente?

Question

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

Se usiamo il .addClass()

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

La classe per myDiv è ora "(no-space)blueberry mango(double-space)carrot"

C'è un left-trim, ma ci sono doppi spazi tra mango e carota perché non c'erano right-trim

• C'è un motivo particolare per cui jQuery è addClass() non è ritaglio a destra?
• Oppure il rivestimento sinistro non era nemmeno previsto?

Answer 1

Sembra che jQuery stia facendo il ritaglio dopo aver aggiunto la classe. Vedere jquery codice addClass sotto,

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

Così è come qui di seguito,

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

Answer 2

Questo accade perché jQuery aggiunge la classe all'elenco delle classi e quindi esegue trim sull'intera stringa.

Dai uno sguardo allo source for addClass per vedere cosa sta succedendo.

Answer 3

Guardando alla fonte, sto cercando di indovinare non c'è ragione per questo:

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

Vero , avere uno spazio bianco prima e dopo ogni lezione aiuta a scoprire se la nuova classe (aggiunta) è già presente oppure no, ma possono comunque sostituire la prima riga con:

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

e ancora avrebbe funzionato allo stesso modo ...