Question

以下是我从我的网络服务获得的输出，但我想从此创建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

你应该试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

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
}())

WORKING MODEL

希望这会有用

Answer 5

普通Javascript中的解决方案 - 一步一步。

{
  currentPage: 2,
  form: {
    page1: {
      field1: '',
      field2: ''
    },
    page2: {
      field3: ''
    }
  }  
}

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

5 个答案: