如何从列表对象生成li和anchor标签？

Question

以下是我从Web服务获得的输出，但是我想从中创建li标签：

{"d":[{"name":"ttt","url":"bbbb"},{"name":"uuu","url":"ppp"}]}

如何从上面的输出生成li标签？

我想要这样的li标签：

<li><a href="bbb" class="mylink">ttt</li>
<li><a href="uuu" class="mylink">ppp</li>

Answer 1

您应该尝试一下。

 var obj = { "d": [{ "name": "ttt", "url": "bbbb" }, { "name": "uuu", "url": "ppp" }] }; $(obj.d).each(function(i,item) { $("<li/>").html($("<a>").attr("href",item.url).text(item.name)).appendTo('body'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

Answer 2

只需使用jQuery .each()遍历对象，然后使用jQuery构建li ：

 var obj = { "d": [{ "name": "ttt", "url": "bbbb" }, { "name": "uuu", "url": "ppp" }] }; $(obj.d).each(function() { var $a = $("<a/>").addClass('mylink').text(this.name).attr('href', this.url); $("<li/>").append($a).appendTo('body'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

请看一下这种方法：

 var data = {"d":[{"name":"ttt","url":"bbbb"},{"name":"uuu","url":"ppp"}]}; $(document).ready(function(){ var arrData = data.d; $.each(arrData, function( index, value ) { $("ul").append("<li><a href='"+value.url+"' class='mylink'>"+value.name+"</a></li>"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div> <ul> </ul> </div> 

Answer 4

您无需使用jQuery就可以做到这一点。此外，也没有data[i]['anchor'] 。我想这里是您在寻找url键的地方。

的HTML

<div id="wrapper"></div>

JS

(function(){
var x = {  
   "d":[  
      {  
         "name":"ttt",
         "url":"bbbb"
      },
      {  
         "name":"uuu",
         "url":"ppp"
      }
   ]
}
var o = x['d'];
var liElem="";
for(var a =0;a<o.length;a++){
liElem += '<li class="demoClass"><a href ="'+o[a].url+'">'+o[a].name+'</a></li>'
}
document.getElementById('wrapper').innerHTML=liElem
}())

工作模式

希望这会有用

Answer 5

使用纯Javascript的解决方案-逐步进行。

 var object = { "d": [{ "name": "ttt", "url": "bbbb" }, { "name": "uuu", "url": "ppp" }] }; function generate(array) { var ul = document.createElement('ul'); array.forEach(function (a) { var li = document.createElement('li'), anchor = document.createElement('a'); anchor.href = a.url; anchor.text = a.name; li.appendChild(anchor); ul.appendChild(li); }); return ul; } document.body.appendChild(generate(object.d));