我可以使用jQuery将javascript数组映射到<li> </li>元素的集合吗？

Question

我有一系列错误消息：json.Errors

有没有办法可以使用此数组创建以下内容 jQuery的？

    <ul class="message" id="message">
        <li>message1</li>
        <li>message2</li>
    </ul>

过去我做过类似下面的代码：

$.map(json.Errors, function (error) {
   return error + '</br>';
}).join('');

我不确定它有用但也许有人知道$ .map可以 用于此。

Answer 1

我建议：

$.each(json.Errors, function(i,e) {
    $('#message li').eq(i).text(e);
});

JS Fiddle demo

当然，这需要li元素和json.Errors数组之间的1：1关系。

如果你想创建li元素（而不是依赖它们已经存在），那么我建议：

$.each(json.Errors, function(i, e) {
    $('<li />').text(e).appendTo('#message');
});​

JS Fiddle demo

参考文献：

• appendTo()。
• eq()。
• jQuery.each()。
• text()。

Answer 2

如果你说它是一个数组，为什么不使用一个简单的连接？

$('#message').html('<li>' + json.Errors.join('</li><li>') + '</li>');

Answer 3

var errUl = $('<ul class="message" id="message">' + $.map(json.Errors, function(error) {
    return '<li>' + error + '</li>';
}).join('') + '</ul>');

Fiddle

这将创建一个单独的jQuery对象，其中包含您的无序列表errUl的已解析HTML数据。

参考http://api.jquery.com/jQuery.map/

Answer 4

如果你想使用地图，你可以做类似于下面的事情

$("#message").empty().append($(json.Errors).map(function (msg){
  return $("<li>" + msg+ "</li>");
}));

或者使用每个

$("#message").empty().append($(json.Errors).each(function (){
  return $("<li>" + this+ "</li>");
}));