[英]How to print a javascript array values in a jQuery .html() function?
我有一個包含一組字符串的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
提前致謝
您應該將中斷符添加到鏈接標記之外,並且只能使用.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 />";
}
var data = data;
var str = '';
for (var i = 1; i <= data.length; i++) {
str += `<a>${data[i]}<br /></a>`;
}
$(target).html(str);
嘗試這個。
最干凈的方法將被包裝在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>
干凈,更簡單的代碼以及有效的演示。
您的代碼在這里是不完整的。不確定您是否在代碼中的任何地方聲明了變量i
。您也將從第一個索引開始循環
與其在每次迭代中都附加到DOM,不如創建一個字符串並將其值連接到它。 在迭代完成時附加它。
var data = data,
htmlString="";
for (var i = 0; i <= data.length; i++) {
htmlString+= data[i] + '<br />';
}
$(target).append(htmlString);
代替for/loop
您可以在帶有map
和templateliteral的一行中使用ES6。
$(target).html(arr.map(el => `<a>${el}</a><br/>`));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.