優化嵌套循環使用jQuery創建HTML元素

Question

我正在開發一個使用HTML/Javascript的屏幕鍵盤。鍵盤在運行時生成。

我使用JSON數據結構來存儲不同的鍵盤佈局，語言設置等

var initParams = { 
    keyboardLanguage: "de", 
    keyboardLayout: { 
     de: { 
      row1: ["Q","W","E","R","T","Z","U","I","O","P"], 
      row2: ["A","S","D","F","G","H","J","K","L"], 
      row3: ["Y","X","C","V","B","N","M"] 
     }, 
     en: { 
      row1: ["Q","W","E","R","T","Y","U","I","O","P"], 
      row2: ["A","S","D","F","G","H","J","K","L"], 
      row3: ["Z","X","C","V","B","N","M"] 
     }  
    } 
} 

這裏是做這項工作的功能：

function CreateKeyHtmlElements(){ 

    var divElement = document.createElement("div"); 

    for(var obj in initParams.keyboardLayout[initParams.keyboardLanguage]){ 

     var keyRow = divElement.cloneNode(false); 
     keyRow.id = "key" + obj; 
     keyRow.className = "keyboard-key-row"; 

     for(var i = 0, l = initParams.keyboardLayout[initParams.keyboardLanguage][obj].length; i < l; i +=1){ 

      var key = divElement.cloneNode(false); 
      key.id = "key-" + initParams.keyboardLayout[initParams.keyboardLanguage][obj][i]; 
      key.className = "keyboard-key"; 

      key.textContent = initParams.keyboardLayout[initParams.keyboardLanguage][obj][i]; 

      keyRow.appendChild(key); 

      $(key).appendTo(keyRow); 

     } 

     $(keyRow).appendTo($("#keyboard-key-box")); 

    } 

} 

是否有任何有效的使用jQuery優化這個函數的方法，特別是循環。

在此先感謝。

Answer 1

其實有是HTML聚集的特殊的HTML元素，而不是使實際的DOM操作

var fragment = document.createDocumentFragment(); 

但是隻要基準不顯示通過innerHTML的片段的方法和插入刺之間的實際差異（proof） 你可以做這樣的事情：

var result = '<div class="keyboard">';  
$(initParams.keyboardLayout[initParams.keyboardLanguage]).each(function(i,obj){ 
     result += '<div class="row">'; 
     result += '<div class="key">'+obj.join('</div class="key"><div>')+'</div>'; 
     result += '</div>'; 
    }) 
$(".target").append(result); 

這不會給你一個機會，以增加ID的，但實際上不到風度的事情，只是結合使用$(el).index()時獲得列索引並$(el).parent().index()獲得行