创建一个 <ul> 并根据传递的数组填充它

IT技术 javascript arrays
2021-02-04 06:35:22

我已经设法根据矩阵中的一个指定数组（即数组中的数组）生成一系列列表项。

我希望能够将一个变量（代表一个数组）传递给一个函数，以便它可以根据传入的数组吐出一个填充有列表项的无序列表。

问题：

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

解决方案需要：

  • 假设 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小提琴

3个回答

首先，不要通过字符串连接来创建 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);
@SahibKhan：这将 的元素解释options.set0为 HTML，这通常是不可取的。（XSS 漏洞的常见来源。当列表为空时也会产生一个空元素。）
2021-03-19 06:35:22
此外，与关联数组的接触很好。
2021-03-28 06:35:22
是的，我已经确保忽略范围只是为了简短。当我把它放在我的项目中时，它会嵌套在一个函数中。
2021-03-30 06:35:22
不错的解决方案，+1 表示不使用 jQuery。
2021-04-03 06:35:22
为什么这次最多投一票以上的班轮。"<li>" + options.set0.join("</li><li>") + "</li>" ?
2021-04-06 06:35:22

以下解决方案的缺点是什么？似乎更快更短。

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;
您的选择有可能来自不受信任的来源，例如 API。在这种情况下，您对 XSS 持开放态度
2021-03-22 06:35:22
感谢您指出这一点，如果数据来自可信来源怎么办？
2021-03-29 06:35:22

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

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;
其它你可能感兴趣的问题
上一篇JavaScript 中的指针？ 下一篇JS字符串“+”与concat方法