Có lý do cụ thể nào khiến addClass của jQuery() không phải là trang trí đúng không?

Question

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

Nếu chúng ta sử dụng .addClass()

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

Lớp cho myDiv tại là "(no-space)blueberry mango(double-space)carrot"

Có một left-trim, nhưng có không gian đôi giữa xoài và cà rốt vì không có right-trim

• Có lý do cụ thể nào khiến jQuery làkhôngkhông phải là phải cắt tỉa?
• Hoặc cắt bên trái thậm chí không được dự định?

Answer 1

Dường như jQuery đang thực hiện cắt sau khi thêm lớp học. Xem jquery đang addClass dưới đây,

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

Vì vậy, nó giống như dưới đây,

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

Answer 2

Điều này xảy ra vì jQuery đang thêm lớp vào danh sách các lớp và sau đó chạy trim trên toàn bộ chuỗi.

Hãy xem qua số source for addClass để xem điều gì đang xảy ra.

Answer 3

Nhìn vào nguồn, tôi đoán không có lý do cho điều đó:

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

Đúng , có khoảng trống trước và sau mỗi lớp giúp tìm xem lớp mới (đang được thêm) đã có hay không, nhưng chúng vẫn có thể thay thế dòng đầu tiên bằng:

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

và nó vẫn sẽ làm việc cùng một cách ...