jquery - 如何在每个循环中的 Html 标签中存储任意数据？

Question

我想将数据存储在Li内部，以便在单击时显示它。 我使用了 Data 属性，但它只存储类型...而不是对象本身...所以它正在做类似的事情

  <li data="[object][object]">

这是我到目前为止所做的:

var data_obj = [{
  name: "foo",
  age: 33
}, {
  name: "goo",
  age: 34
}];

var tmp = '<ul id="list">';
var count = 0;

$.each(data_obj, function() {

  count++;
  tmp += '<li data="' + this + '">' + count + '</li>';
});

$('#res').html(tmp + '</ul>');

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

我的目标是能够在被点击时获取李的数据....谢谢

Answer 1

不要连接 html，而是构建它并为数据中的每个键/值添加单独的 data 元素:

var data_obj = [{
  name: "foo",
  age: 33
}, {
  name: "goo",
  age: 34
}];

var count = 0;
var lis = [];
$.each(data_obj, function() {

   var $li = $('<li />');
   $.each(this, function(k,v){
      $li.data(k,v);
   })
  count++;
  $li.text(count)
  lis.push($li)
});

$('#res').append($('<ul>').append(lis))
$('ul li').on('click',function(){
   console.log($(this).data('name') + ":" + $(this).data('age'))
});

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