Question

我正在尝试将forEach的结果逐一循环作为我使用过的HTML的列表：

object = {
food1 : [potato, tomato, carrot]
}

object[food1].forEach(function (item){
    var text = "";
    text += item;
    $("#ulelement").html("<li>" + text + "</li>");
})

当前，这导致向我的html中添加一个列表元素，其中包含forEach的最后一次运行，即“胡萝卜” 我希望实现的目标是给我3个列表元素：土豆番茄胡萝卜

Answer 1

调用.html()时，您会覆盖上一次迭代的效果，因此只能在输出中得到最后一个值。

您可以使用.append()：

$("#ulelement").append("<li>" + text + "</li>");

侧面说明：最好完全使用jQuery，以避免出现字符编码问题：

$("#ulelement").append($("<li>").text(text));

要从头开始重置列表，请在循环之前添加以下内容：

$("#ulelement").empty();

Answer 2

如果我理解正确，您希望ulelement包含所有创建的li元素而不仅仅是最后一个元素，如果是这样，您可以使用.reduce，这是一个例如：

ulelement.html(object[array].reduce((a, c) => `${a}<li>${c}</li>`, ""))

您可以找到有关.reduce HERE

的更多详细信息

此外，在此示例中，我使用了模板文字，您可以找到有关HERE的详细信息

如何列出forEach的每个循环到HTML

2 个答案: