如何在jQuery .html（）函数中打印javascript数组值？

Question

我有一个包含一组字符串的JavaScript数组。 我想使用j Query或JavaScript在HTML div元素中逐行显示它们。

我的代码到现在为止：

var data = data;
for (i = 1; i <= data.length; i++) {

  data[i] = data[i] + '<br />';

  $(target).html('<a>'+data[i]+'</a>');
}

此时此刻我的数据就会显示出来。

Labelling MachinesLabels - Plastic, Metal, Foil etcLabels FabricLaboratories - MedicalLaboratories - TestingLaboratory Equipment & SuppliesLaboratory Equipment Services & Calibration

我希望它们像这样显示为链接（内部标签）：

Labelling Machines
Labels - Plastic, Metal, Foil etc
Labels Fabric
Laboratories - MedicalLaboratories - Testing
Laboratory Equipment & Supplies
Laboratory Equipment Services & Calibration

提前致谢

Answer 1

您应该将中断符添加到链接标记之外，并且只能使用.html（）一次，因为它完全替换了给定元素的innerHTML，即

str = "";
for (i = 1; i <= data.length; i++) {
    str += "<a>" + data[i] + "</a><br />";
}
$(target).html(str);

我建议另一种方法，使用innerHTML（javascript）或append（jquery），因为已经提到了另一个答案

for (i = 1; i <= data.length; i++) {
    target.innerHTML += "<a>" + data[i] + "</a><br />";
}

Answer 2

var data = data;
var str = '';
for (var i = 1; i <= data.length; i++) {

  str += `<a>${data[i]}<br /></a>`;

}
$(target).html(str);

尝试这个。

Answer 3

最干净的方法将被包装在div中。 并且您需要使用.append（）方法不覆盖已经添加到目标中的初始数据。

 var data = ["Hello", "World", "Lorem", "Ipsum", "More length"]; for (var i = 0; i < data.length; i++) { $("#result").append('<div><a href="#" class="link">' + data[i] + '</a></div>'); } 

 .link { color: #5ca5cc; margin-bottom: 10px; text-decoration: none; } 

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

干净，更简单的代码以及有效的演示。

Answer 4

您的代码在这里是不完整的。不确定您是否在代码中的任何地方声明了变量i 。您也将从第一个索引开始循环

与其在每次迭代中都附加到DOM，不如创建一个字符串并将其值连接到它。 在迭代完成时附加它。

var data = data,
htmlString="";
for (var i = 0; i <= data.length; i++) {
htmlString+= data[i] + '<br />';
}
$(target).append(htmlString);

Answer 5

代替for/loop您可以在带有map和templateliteral的一行中使用ES6。

$(target).html(arr.map(el => `<a>${el}</a><br/>`));

DEMO