Question

我试图在多个特定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正确显示。请帮忙

Answer 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

Answer 2

因为你覆盖了之前的数据。如果我是正确的，请尝试获取元素并添加新元素。

或者您可以使用append（）方法。

Answer 3

在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>" );
   }

如何使用jquery / javascript从for循环发布多个div id值

3 个答案: