2

我有从文本文件读取并插入元素的脚本，以便它们可以被设置样式和显示。但是，我现在想在一个 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。然后我希望 line2 和 line 3 进入另一个 DIV ......

var coup 不必是 div，我不介意将其更改为 ap、span 或 li。

谢谢！

4

2 回答 2

2 
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 中，或者它的一些变体中，这取决于你所追求的结构？

于 2012-12-08T18:33:14.880 回答
1

尝试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是进一步加快速度。当您使用带有i < someArray.length条件的 for 循环时，JS 解释器将查找someArray.length迭代的每一步。存储对someArray.length修复该问题的引用。

于 2012-12-08T18:36:56.263 回答