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

配对DIV中的数组元素

2 个答案: