创建一个 <ul> 标签，并根据传入的数组填充内容。

Question

创建一个 <ul> 标签，并根据传入的数组填充内容。

javascriptarrays

60

我已经成功地根据矩阵中指定的一个数组（即数组内嵌套数组）生成了一系列列表项。

我希望能够传递一个变量（代表数组）到函数中，这样它就可以将基于传入的数组填充未排序列表中的列表项。

问题：

该函数一次只能处理一个数组
它还会在标记中产生逗号（可能是因为它将数组转换为字符串）

解决方案需要：

假设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

- user110857

3个回答

9

以下解决方案有哪些缺点？看起来更快更简洁。

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

var list = "<li>" + options.set0.join("</li><li>") + "</li>";
document.getElementById("list").innerHTML = list;

- Beamer

有可能您的选项来自于不受信任的来源，例如 API。在这种情况下，您就容易受到 XSS 攻击的威胁。 - Victor Fernandes

谢谢您指出这一点，如果数据来自可信的来源呢？ - Beamer

-2

您也可以考虑以下解决方案：

let sum = options.set0.concat(options.set1);
const codeHTML = '<ol>' + sum.reduce((html, item) => {
    return html + "<li>" + item + "</li>";
        }, "") + '</ol>';
document.querySelector("#list").innerHTML = codeHTML;

- Mihai Damian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ry- · Accepted Answer

首先，不要通过字符串拼接来创建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);