JavaScript JQuery 数组循环

Question

请问有人可以帮我处理我的循环数组吗？对于一些疯狂的事情，我无法让它循环，我知道这一定很简单，任何我错过的想法。

非常感谢

var i;
for (i = 0; i < 5; i++) {
  $('#display').html('<p> Price: ' + data.results[i].value_inc_vat + '</p>');
  $('#display').append('<p> Time : ' + data.results[i].valid_from + '</p>');
  $('#display').append([i]);
}

Answer 1

您的代码循环正确。问题是因为您使用的 html() 完全覆盖了元素中的所有现有内容。因此，在每次连续迭代中，您都会删除先前附加的内容。要解决此问题，请将 html() 更改为 append():

let data = {
  results: [{
    value_inc_vat: 'value_inc_vat1',
    valid_from: 'valid_from1'
  },{
    value_inc_vat: 'value_inc_vat2',
    valid_from: 'valid_from2'
  }]
}

var i;
for (i = 0; i < 2; i++) {
  $('#display').append('<p> Price: ' + data.results[i].value_inc_vat + '</p>');
  $('#display').append('<p> Time : ' + data.results[i].valid_from + '</p>');
  $('#display').append([i]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display"></div>

还值得注意的是，您可以使用 map() 构建字符串数组，然后只需 append() 一次即可提高性能。试试这个:

let data = {
  results: [{
    value_inc_vat: 'value_inc_vat1',
    valid_from: 'valid_from1'
  },{
    value_inc_vat: 'value_inc_vat2',
    valid_from: 'valid_from2'
  }]
}

var html = data.results.map(function(result) {
  return '<p>Price: ' + result.value_inc_vat + '</p><p>Time : ' + result.valid_from + '</p>';
  
  // interpolated string version, note this won't work in IE:
  //return `<p>Price: ${result.value_inc_vat}</p><p>Time : ${result.valid_from}</p>`;
});
$('#display').append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display"></div>