55

マトリックス内の 1 つの指定された配列 (つまり、配列内の配列) に基づいて一連のリスト項目を生成することができました。

変数 (配列を表す) を関数に渡して、渡された配列に基づいてリスト項目で満たされた順序付けられていないリストを吐き出すことができるようにしたいと考えています。

問題:

  • この関数は、一度に 1 つの配列でのみ機能します
  • また、マークアップにコンマが生成されます (おそらく、配列を文字列に変換しているため)。

ソリューションには次のことが必要です。

  • 順不同リストが DOM に存在しないと仮定する
  • 渡されたさまざまな配列を受け入れることができます ( options[0]、options[1]など)。
  • コンマなしでリスト項目を生成する

JavaScript:

var options = [
        set0 = ['Option 1','Option 2'],
        set1 = ['First Option','Second Option','Third Option']
    ]

function makeUL(){
    var a = '<ul>',
        b = '</ul>',
        m = [];

    // Right now, this loop only works with one
    // explicitly specified array (options[0] aka 'set0')
    for (i = 0; i < options[0].length; i += 1){
        m[i] = '<li>' + options[0][i] + '</li>';
    }

    document.getElementById('foo').innerHTML = a + m + b;
}

// My goal is to be able to pass a variable
// here to utilize this function with different arrays
makeUL();

jsフィドル

4

3 に答える 3

94

まず、文字列の連結によってHTML要素を作成しないでください。DOM操作を使用します。より速く、よりクリーンで、エラーが発生しにくくなります。これだけであなたの問題の1つを解決します。次に、任意の配列を引数として受け入れるようにします。

var options = [
        set0 = ['Option 1','Option 2'],
        set1 = ['First Option','Second Option','Third Option']
    ];

function makeUL(array) {
    // Create the list element:
    var list = document.createElement('ul');

    for (var i = 0; i < array.length; i++) {
        // Create the list item:
        var item = document.createElement('li');

        // Set its contents:
        item.appendChild(document.createTextNode(array[i]));

        // Add it to the list:
        list.appendChild(item);
    }

    // Finally, return the constructed list:
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById('foo').appendChild(makeUL(options[0]));

これがデモです。また、グローバルスコープにリークしているset0ことに注意することもできset1ある種の連想配列を作成する場合は、オブジェクトを使用する必要があります。

var options = {
    set0: ['Option 1', 'Option 2'],
    set1: ['First Option', 'Second Option', 'Third Option']
};

そして、そのようにそれらにアクセスします：

makeUL(options.set0);
于 2012-06-20T21:57:38.703 に答える