如何从列表对象生成li和锚点标记

How to generate li and anchor tag from list object?

本文关键字：li 列表 对象      更新时间：2023-09-26

下面是我从web服务中得到的输出，但我想从中创建li标记：

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

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

我想要李这样的标签：

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

您应该试试这个。

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>

只需使用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>

请看一下这种方法：

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>

一个纯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));

您可以在不使用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
}())

工作模型

希望这将是有用的

相关文章：