更有效率的jquery

這段代碼的作品，但它有點讓瀏覽器怪癖了一下。沒什麼大不了我想知道是否有辦法提高效率？我可以使用緩存或以某種方式填充一個選擇，然後將其複製到其他5.（在頁面上有一類「掩碼」有6個下拉列表。）更有效率的jquery

任何幫助將不勝感激！

$('.mask').each(function() { 
    $(this).append($('<option/>').val("").text("")); 
    for (var i = 1; i < 256; i++) { 
     $(this).append($('<option/>').val(i).text(i)); 
    } 
    }); 
});

來源

2010-12-22 Kyle Rogers

您可以創建節點一次，然後克隆它們，就像這樣：

var temp = $('<select/>'); 
$('<option/>').val("").text("").appendTo(temp); 
for (var i = 1; i < 256; i++) { 
    $('<option/>').val(i).text(i).appendTo(temp); 
} 
temp.children().clone().appendTo('.mask');

而是做了很多個人的追加到DOM（這是非常昂貴的）這個批處理的所有元素，直到在文檔片段中克隆它們，分批追加（每個選擇一個批次）。

來源

2010-12-22 21:30:12

有人可以詳細說明爲什麼這是首選，即使它不如上述解決方案那麼快？ – 2010-12-24 15:03:50

@Kyle - 使用DOM創建節點比較安全，例如值中的引號等（雖然*在這種特殊情況下是安全的）將導致問題，無效的HTML和無法預測的呈現。爲了安全起見，堅持使用DOM創建方法，而不是通過字符串生成HTML。 – 2010-12-24 15:46:42

它的速度更快（約3-10倍，所測試here）建立自己的HTML在一個字符串：

var html = "<option value=''></option>"; 
for (var i = 1; i < 256; i++) { 
    html += "<option value='" + i + "'>" + i + "</option>"; 
} 
$(".mask").append(html);

見性能測試，在這個線程比較當前選項：http://jsperf.com/appending-options-jquery

來源

2010-12-22 22:51:07

更有效率的jquery

回答

相關問題