【问题标题】:Jquery each function (key, value) result only returns last key and valuejquery每个函数(key,value)结果只返回最后一个key和value
【发布时间】:2019-04-26 14:59:23
【问题描述】:

1.jquery每个函数(key, value)的结果只返回最后一个key和value。 2.它在警告框中工作正常 3.将数据转换成 HTML 时只返回最后一个键和值

var result = '{"FirstName":"John","LastName":"Doe","Email":"johndoe@johndoe.com","Phone":"123 dead drive"}';

$.each($.parseJSON(result), function(k, v) {
  console.log(k + ' is ' + v);
  $('#stage').html('<p>' + k +':' + v+ '</p>'); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="stage" style = "background-color:#cc0;">
   STAGE
</div>

我不知道如何获取 HTML 中的所有值,请帮助提前谢谢。

【问题讨论】:

  • 如果您愿意,请将与问题相关的所有代码发布在问题本身中 - 不要将其隐藏在链接后面。你不应该告诉那些愿意提供帮助的潜在帮助者,他们必须在异地导航才能了解你正在使用什么。如果链接断开,则该问题可能对未来的读者毫无用处。请在minimal reproducible example 中将您的代码编辑到问题中,否则问题可能会被关闭,谢谢。

标签: javascript jquery html each


【解决方案1】:

因为您在每个循环中都在 #stage 上重写 html。您需要将内容存储在变量中,循环结束后,将结果插入文档中。

var result = '{"FirstName":"John","LastName":"Doe","Email":"johndoe@johndoe.com","Phone":"123 dead drive"}';

var html = "";
$.each($.parseJSON(result), function(k, v) {
  html += '<p>' + k +':' + v+ '</p>';
});
$('#stage').html(html); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="stage" style = "background-color:#cc0;">
   STAGE
</div>

【讨论】:

【解决方案2】:

您也可以使用.append() 代替.html()

var result = '{"FirstName":"John","LastName":"Doe","Email":"johndoe@johndoe.com","Phone":"123 dead drive"}';

$.each($.parseJSON(result), function(k, v) {
  //console.log(k + ' is ' + v);
  $('#stage').append('<p>' + k + ':' + v + '</p>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="stage" style="background-color:#cc0;">
  STAGE
</div>

【讨论】:

  • 您的代码性能不佳,正如您在 learn.jquery 中看到的那样
猜你喜欢
  • 2018-10-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-23
相关资源
最近更新 更多