javascript - 映射数组数据并添加到 HTML 中

Question

我有一个jsfiddle它基本上采用数组数据并将其附加到 HTML。我使用 for 循环来实现这一点。但我很好奇如果我想使用 Array.prototype.map() 函数来做到这一点，我该怎么做？我不想使用任何第三方库，例如 underscore 或 lodash。

Answer 1

您可以使用 .map() 将新的 HTML 元素收集到数组中，然后在一次操作中将该结果附加到输出元素。

请注意，您应该使用 .text() 方法，而不是连接字符串，以避免大于号或与号破坏生成的 HTML。

它的样子如下:

var data = [["title 1","title 2","title 3"],
            ["description 1","description 2","description 3"],
            ["link 1","link 2","link 3"]];

$("#output").append(data[0].map( (title,i) =>
    $("<div>").append(
        $("<h1>").text(title),
        $("<p>").text(data[1][i]),
        $("<a>").text(data[2][i])
    )
));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

注意:当您确实想要使用第三个值作为超链接时，请使用 .attr():

$("<a>").attr('href', data[2][i]).text('click here')

或者您可能只是超链接第一个(标题)值:

$("<div>").append(
    $("<h1>").append(
        $("<a>").attr('href', data[2][i]).text(title)
    ),
    $("<p>").text(data[1][i])
)