如何从列表对象生成 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

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

请看一下这个方法：

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 3

你应该试试这个。

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 4

不使用 jQuery.Also 也可以做到，没有 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
}())

WORKING MODEL

希望这会有用

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));

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

How to generate li and anchor tag from list object?

javascript

jquery

c3.js