Создайте <ul> и заполните его на основе переданного массива

Мне удалось создать серию элементов списка на основе одного указанного массива в матрице (т.е. массив внутри массива).

Я хотел бы передать переменную (представляющую массив) функции, чтобы она могла выплеснуть неупорядоченный список, заполненный элементами списка, на основе массива, переданного в него.

Проблемы:

  • Функция работает только с одним массивом за раз
  • Он также создает запятые в разметке (предположительно, потому что он преобразует массив в строку)

Решение должно:

  • предположим, что неупорядоченный список не существует в 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();

jsFiddle

Ответы

Ответ 1

Прежде всего, не создавайте HTML-элементы путем конкатенации строк. Используйте DOM-манипуляцию. Это быстрее, чище и менее подвержено ошибкам. Это само по себе решает одну из ваших проблем. Затем просто пусть он принимает любой массив в качестве аргумента:

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);