将数组元素值放入span中（jQuery）

Question

var data = [{"id":"2015-07-003","cname":"John Smith ","caddress":"Tokyo,Japan","ccontact":"123"},{"id":"2015-07-003","cname":"James Harden","caddress":"Osaka Japan","ccontact":"345"}]



$.each(data, function(item, element) {
  alert(element.cname);
  $('#name').text(element.cname);
});


<span id='name'></span>

上述代码中，我希望将数组中的姓名放入span标签内，但现在只显示最后一个姓名。也就是说，姓名被覆盖了。请问如何迭代姓名，以便将所有姓名都显示出来。

我希望它看起来像这样：

John Smith
James Harden

- guradio

Answer 1

问题在于使用 .text() 会用新值覆盖先前的值，您需要将新值附加到先前的值上。

因此，一个解决方案是创建一个 cname 数组，然后使用 .join() 生成所需的输出 HTML，并使用 .html() 设置内容。

var data = [{
  "id": "2015-07-003",
  "cname": "John Smith ",
  "caddress": "Tokyo,Japan",
  "ccontact": "123"
}, {
  "id": "2015-07-003",
  "cname": "James Harden",
  "caddress": "Osaka Japan",
  "ccontact": "345"
}]


$('#name').html($.map(data, function(item) {
  return item.cname
}).join('<br />'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id='name'></span>

- Arun P Johny

---

有没有办法让它更灵活一些，我的意思是我还有其他的跨度我想要像这样制作。 - guradio

@Pekka 如果您能解释您的要求，那么可能会有 - 如果可能，请编辑此fiddle以重新创建您的问题。 - Arun P Johny

http://jsfiddle.net/95g4b32k/3/ 然后我想把值放在每个 span 上，我为具有 id address 的 span 添加了地址，为具有 id contact 的 span 添加了联系方式。 - guradio

@Pekka，如果是这样的话，使用each循环会更好。 - Arun P Johny

是的，就像我的代码一样，我的唯一问题是如何将多个值放入一个span中。 - guradio

Answer 2

使用 append() 方法。

  $('#name').append(element.cname+"<br>");

DEMO

- Balachandran

---

这不会是多行的。 - Jaromanda X

Answer 3

var str = '';
$.each(data, function (item, element) {
    str += element.cname + '<br />';
});
$('#name').html(str);

希望这有所帮助。

- hungndv

Answer 4

//Declare a variable
var data=""

$.each(data, function(item, element) {
//Append element to data variable.

  alert(element.cname);
  data+=element.cname;
});

//Append the entire data to the span at the end.
$('#name').append(data);

- Nikhil Batra