2013-04-25 263 views
0

我正在开发一个使用HTML/Javascript的屏幕键盘。键盘在运行时生成。优化嵌套循环使用jQuery创建HTML元素

我使用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优化这个函数的方法,特别是循环。

在此先感谢。

+1

http://codereview.stackexchange.com/ – undefined 2013-04-25 07:59:30

回答

0

其实有是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()获得行