向存储在Javascript变量中的元素添加HTML5数据属性

我正在循环处理一个AJAX请求，并从结果中将

列表添加到

我遇到的问题是将AJAX请求返回的数据作为HTML5数据属性存储在这些项目上。下面是一些示例代码：

function load_items(json_url, callback) {

  // Set a variable to contain all the items
  var all_the_items = $('<ul class="all_items_cont"></ul>');

   $.ajax({
      type: 'GET',
      cache:false,
      url: json_url,
      jsonpCallback: 'jsonCallback',
      contentType: "application/json",
      dataType: 'jsonp',
      success: function(data) {

        $.each([].concat(data.item), function(i, post){

          // Create An Item
          var current_item = $('<li><a>'+ post.title + '</a></li>');

          // This is how I tried to add the data... not working
          current_item.find('a').data('description',post.description)

          // Append Item to <ul>
          $(all_the_items).append(current_item);     

        });   

        if (typeof callback === 'function') {
          callback(all_the_items.html());
        }

     }      
  });
}      

我发现，如果我显式地将数据写入HTML，那么它就可以正常工作，但是如果我使用jQuery存储数据属性，那么以后就无法检索它们

我不能在HTML中显式地写出数据属性，因为有时它们是一个完整的JSON提要或非常复杂的描述

有什么想法吗

------编辑：2015年5月21日下午3:38-------

我使用jQuery

data

函数访问数据，如下所示：

  $('div#container ul li:first a').data('description')

---

这只是一个示例，因为我实际使用的代码是在拖放时检索内容。这是许多不必要的代码

如果我正确地收集了您的问题，那么JQuery并不打算做什么（在DOM元素上设置任意数据，然后将其作为

data foo=”“

属性拉出）

data foo

属性与

.data

方法设置的属性不同。数据可以朝一个方向流动，从属性到元素的数据存储（由JQuery自动完成），但不能朝另一个方向流动

如果你真的想把它作为HTML的一部分，你必须手动设置

datafoo

属性

// attach the data to the DOM element
$(myElement).data('description', post.description);
// set the data-description attribute so we can pull it out as HTML
$(myElement).attr('data-description', post.description);

---

我在代码中看到的另一个问题是，如果post.title包含格式错误的HTML，则在设置

回调（all_the_items.HTML（））时调用
$（''+post.title+''）
时，它可能会破坏
元素它将删除与DOM元素和变量关联的数据，并将其转换为纯HTML。将其更改为：
回调（所有项）它会工作的
 如果添加
console.log（$（所有项目a:first'）.data（））到ajax
success
块的底部，控制台的输出是什么？您有如何检索数据的代码吗？在将
控制台.log
添加到
成功
回调的底部后，我已确认在
中正确添加了每个
的数据属性。每个
循环（在
成功
回调中）。一旦HTML附加到DOM中，以编程方式添加的数据就会丢失。我会更新我如何检索数据的帖子。明白了，我想我没有意识到它们是如此独特。所以你说我要么把它变成HTML，要么以某种方式保持对
的引用的唯一性。谢谢你的帮助。它引导我找到了解决方案：当我设置
回调（all_the_items.html（））时我删除了与DOM元素关联的数据，并将其转换为纯HTML。一旦我这样做：
callback（所有项目）成功了。在那之后，我不得不重写我是如何处理数据的。再次感谢。
// attach the data to the DOM element
$(myElement).data('description', post.description);
// set the data-description attribute so we can pull it out as HTML
$(myElement).attr('data-description', post.description);