2

スタイルを設定して表示できるように、テキスト ファイルから読み取り、要素を挿入するスクリプトがあります。ただし、DIV 内の 2 つの要素をペアにしたいと考えています。コードは次のとおりです。

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 を 1 つの DIV に入れたいと思います。次に、2 行目と 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);
}​

毎回2回繰り返し、両方を同じDIVに配置するか、目的の構造に応じてそのバリエーションを配置しますか？

于 2012-12-08T18:33:14.880 に答える
1

document.createTextNode();反復の各ステップで 2 行を追加しようとする基本的な方法。

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それを修正するための参照を保存します。

于 2012-12-08T18:36:56.263 に答える