如何在jQuery .html()函数中打印javascript数组值？

Question

我有一个包含一组字符串的JavaScript数组。我希望使用j查询或JavaScript将它们逐行显示在HTML元素中。

我的代码到现在为止：

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)或附加(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>

​

干净的，更简单的代码，以及工作演示。