Question

我希望将数据存储在Li中，以便在点击时显示它。我已经使用了Data属性，但它只存储了类型...而不是对象本身......所以它做了类似的事情

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

以下是我迄今所做的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

你得到[object][object]，因为这是javascript尝试将对象转换为字符串时的作用。当您执行"str" + obj + "str"时，obj将转换为字符串。

您也可以使用JSON.stringify，但jQuery有更好的方法：

您可以从jQuery的.data()函数和jQuery的元素创建实现中受益。

请改为尝试：

var data_obj = [{
  name: "foo",
  age: 33
}, {
  name: "goo",
  age: 34
}];

var $ul = $('<ul/>', {
  id: 'list'
});

var count = 0;

$.each(data_obj, function() {

  count++;
  var $li = $("<li/>", {
    text: count
  });
  $li.data('obj', this);
  $ul.append($li);
});

$('#res').append($ul);

//You can use this to retrieve data on click:

$("#res").on('click', 'li', function(){
  var data = $(this).data('obj');
  alert(data.name);
});

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

要实现此目的，您可以使用data()方法在jQuery的数据缓存中存储对象。但是，您需要稍微重新排列逻辑，以便保留对创建元素的引用，如下所示：

＆＃13;

var data_obj = [{
  name: "foo",
  age: 33
}, {
  name: "goo",
  age: 34
}];

var elements = data_obj.map(function(obj, i) {
  return $(`<li>${i + 1}</li>`).data('obj', obj);  
});

$('<ul id="list" />').appendTo('#res').append(elements);

// for testing only...
$('#res').on('click', 'li', function() {
  console.log($(this).data('obj'));
});

＆＃13;

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

＆＃13;

Answer 4

您可以通过使用JSON.stringify（）将数据转换为字符串来将数据存储在li元素中。

 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="' + JSON.stringify(this) + '">' + count + '</li>';
    });

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

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

4 个答案: