我试图在多个特定div上使用jquery中的for循环显示数组中的值。但它只显示最后一条记录。但是每条记录都显示在控制台日志中。我试着每次在循环中清除变量。但没有运气。感谢每一个帮助。
var result = [{"title":"red","sellingPrice":"489","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/p\/itmew9fze83xwhky"},
{"title":"blue","sellingPrice":"481","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/q\/itmew9fze83xwhky"},
{"title":"white","sellingPrice":"482","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/r\/itmew9fze83xwhky"},
{"title":"green","sellingPrice":"492","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/s\/itmew9fze83xwhky"},
{"title":"yellow","sellingPrice":"465","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/t\/itmew9fze83xwhky"}];
for(var i = 0; i <= result.length-1; i++) {
document.getElementById('title').innerHTML =result[i].title;
document.getElementById('price').innerHTML =result[i].sellingPrice;
document.getElementById('url').innerHTML =result[i].productUrl;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="container">
<div id="title"></div>
<div id="price"></div>
<div id="url"></div>
</div>
</body>
</html>
现在还有一个问题。数组中还有其他值,如title,price,url等,我使用div id来显示相同的值。但由于我使用了append,所有值都在第一个屏幕中彼此相邻。我希望他们每个人都反对它的相关集合。但是console.log正确显示。请帮忙
答案 0 :(得分:1)
试试这个:将DIV与数据一起注入
<div id="container">
</div>
使用Javascript:
var result = [{"title":"red","sellingPrice":"489","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/p\/itmew9fze83xwhky"},
{"title":"blue","sellingPrice":"481","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/q\/itmew9fze83xwhky"},
{"title":"white","sellingPrice":"482","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/r\/itmew9fze83xwhky"},
{"title":"green","sellingPrice":"492","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/s\/itmew9fze83xwhky"},
{"title":"yellow","sellingPrice":"465","productUrl":"https:\/\/dl.website.com\/dl\/gn-cm\/t\/itmew9fze83xwhky"}];
for(var i = 0; i <= result.length-1; i++) {
jQuery('<div/>', {
id: 'title'+i,
text: result[i].title
}).appendTo('#container');
jQuery('<div/>', {
id: 'price'+i,
text: result[i].sellingPrice
}).appendTo('#container');
jQuery('<div/>', {
id: 'url'+i,
text: result[i].productUrl
}).appendTo('#container');
}
codepen参考: https://codepen.io/YasirKamdar/pen/WMdXBw
答案 1 :(得分:0)
因为你覆盖了之前的数据。如果我是正确的,请尝试获取元素并添加新元素。
X
或者您可以使用append()方法。
答案 2 :(得分:0)
在id为#container的元素上使用 append(),在每次迭代时连续动态添加三个div标题,价格,网址。不要忘记删除这三个div级别的id。
for(var i = 0; i <= result.length-1; i++) {
$( "#container" ).append( "<div>"+result[i].title+"</div></br>" );
$( "#container" ).append( "<div>"+result[i].sellingPrice+"</div></br>" );
$( "#container" ).append( "<div>"+result[i].productUrl+"</div></br>" );
}