如何在循环的HTML标签中存储任意数据？Li标签存对象遇[object Object]问题

我太懂这个坑了！你现在遇到的问题是直接把JavaScript对象拼进HTML的data属性里时，对象会被自动调用toString()方法转成字符串[object Object]，这根本存不下你要的实际数据。下面给你两个靠谱的解决方案，按需选就行：

方案一：用jQuery的.data()绑定对象（推荐） #

别在拼接HTML的时候硬塞data属性，先把列表结构渲染出来，再用jQuery的.data()方法把对象直接绑定到对应的<li>元素上——这个方法会帮你存对象引用，不用折腾序列化：

var data_obj = [{ name: "foo", age: 33 }, { name: "goo", age: 34 }];
var tmp = '<ul id="list">';
var count = 0;

// 先渲染纯HTML结构
$.each(data_obj, function() {
  count++;
  tmp += '<li>' + count + '</li>';
});
tmp += '</ul>';
$('#res').html(tmp);

// 给每个li绑定对应的对象数据
$('#list li').each(function(index) {
  $(this).data('item', data_obj[index]);
});

// 点击时获取完整对象
$('#list').on('click', 'li', function() {
  var item = $(this).data('item');
  console.log('你点击的是：', item.name, '，年龄', item.age);
  // 这里直接用item.name、item.age就行，不需要解析
});

方案二：序列化对象为JSON字符串（适合必须在HTML里存数据的场景） #

如果一定要把数据写在HTML的data属性里，可以把对象转成JSON字符串，点击的时候再解析回来。注意要转义引号，避免破坏HTML结构：

var data_obj = [{ name: "foo", age: 33 }, { name: "goo", age: 34 }];
var tmp = '<ul id="list">';
var count = 0;

$.each(data_obj, function() {
  count++;
  // 把对象转成JSON字符串，用单引号包裹避免和HTML的双引号冲突
  var jsonData = JSON.stringify(this);
  tmp += '<li data-item=\'' + jsonData + '\'>' + count + '</li>';
});
tmp += '</ul>';
$('#res').html(tmp);

// 点击时解析JSON字符串为对象
$('#list').on('click', 'li', function() {
  var item = $(this).data('item');
  // jQuery会自动尝试解析JSON字符串，所以这里直接拿到对象
  console.log('你点击的是：', item.name, '，年龄', item.age);
});

额外提醒 #

如果你的数据里包含用户输入的内容，别直接拼接HTML字符串，容易触发XSS攻击。推荐用jQuery的DOM创建方式更安全：

var $list = $('<ul id="list"></ul>');
var count = 0;
$.each(data_obj, function(index) {
  count++;
  $('<li>').text(count).data('item', this).appendTo($list);
});
$('#res').append($list);

这样既安全，又能直接绑定数据，一举两得～

内容的提问来源于stack exchange，提问作者RoyBarOn