在DIV中配對數組元素

Question

我有從文本文件中讀取並插入元素的腳本，以便可以對它們進行樣式化和顯示。但是，我現在想要在DIV內部配對兩個元素。這裏是代碼：

var lines = request.responseText.replace(/\r/g, "").split("\n"); // Remove carriage returns (\r) and place text into an array, split at the newline character (\n) 
     for (var i = 0; i < lines.length; i++) { // Cycle through each line in the array 
      if (lines[i].length >= 57) { // Check if the current line is lengthy, and if so.....separate function 
      } 
      var coup = document.createElement("div"); // Create a div element 
      coup.id = "line" + i; // Give the div an ID in the form of line0, line1, etc. 
      coup.innerText = coup.textContent = lines[i]; // Place the current line of text in the div 
      el_status.appendChild(coup); // Append the div to the status box 
     } 

我想line0和line1進入一個DIV。然後，我想第2行和第3行進入另一個DIV ...

var coup不一定是一個div，我不介意將它改爲p，span或li。

謝謝！

Answer 1

var lines = request.responseText.replace(/\r/g, "").split("\n"); 
for (var i = 1; i < lines.length; i += 2) { 
    var coup = document.createElement("div"); 
    coup.id = "line" + i; 
    coup.textContent = lines[i - 1] + lines[i]; 

    el_status.appendChild(coup); 
}​ 

只是每次迭代兩個，都放置在同一個DIV，或一些變化，這取決於你以後在做什麼結構？

Answer 2

嘗試document.createTextNode();並在迭代的每一步添加兩行的基本方法。

var lines = request.responseText.replace(/\r/g, "").split("\n"); // Remove carriage returns (\r) and place text into an array, split at the newline character (\n) 
     for (var i = 0, l = lines.length; i < l; i += 2) { // Cycle through each line in the array 
      if (lines[i].length >= 57) { // Check if the current line is lengthy, and if so.....separate function 
      } 
      var coup = document.createTextNode(lines[i-1] + lines[i]); // Create a div element 
      coup.id = "line" + i; // Give the div an ID in the form of line0, line1, etc. 
      coup.innerText = coup.textContent = lines[i]; // Place the current line of text in the div 
      el_status.appendChild(coup); // Append the div to the status box 
     } 

另外DOM操作相當昂貴，並且在for循環中添加可能會減慢速度。所以我寧願這樣做：

var lines = request.responseText.replace(/\r/g, "").split("\n"); // Remove carriage returns (\r) and place text into an array, split at the newline character (\n) 
var appendedLines = [];//create a new array. 
     for (var i = 0, l = lines.length; i < l; i += 2) { // Cycle through each line in the array 
      if (lines[i].length >= 57) { // Check if the current line is lengthy, and if so.....separate function 
      } 
      var coup = document.createTextNode(lines[i-1],lines[i]); // Create a div element 
      coup.id = "line" + i; // Give the div an ID in the form of line0 
      appendedLines.push(coup); // Append the div to the status box 
     } 
el_status.appendChild(appendedLines.join(''));// this uses a single append statement. 

此外，l = lines.length點是爲了進一步加快速度。當您使用for循環的條件爲i < someArray.length時，JS解釋器將在迭代的每一步中查找someArray.length。存儲對someArray.length修復程序的引用。