Question

我正在循环访问AJAX请求，并从结果中向<li>添加<ul>列表。

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

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附加到目标<div>：

 load_items('http://jsonurl.com',function(html){
    $('div#container').append(html)
  })

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

我无法在HTML中明确地编写数据属性，因为有时它们是完整的JSON提要或非常复杂的描述。

有什么想法吗？

------编辑5/21/15 3:38 pm -------

我正在使用jQuery data函数访问数据：

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

这只是一个例子，因为我实际使用的代码是jQuery Droppable并在DROP上检索内容。对于问题，这是很多不必要的代码。

Answer 1

如果我正确地收集你的问题，那么你想要做的事情（在DOM元素上设置任意数据，然后将其作为data-foo=""属性拉出来）并不是JQuery的意图。

data-foo属性与.data方法设置的属性不同。数据可以从一个方向流动，从属性到元素的数据存储（由JQuery自动完成），但不是相反的方式

如果您真的想将其作为HTML的一部分提取出来，则必须手动设置data-foo属性。

// 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，则在您调用<a>时可能会破坏$('<a>'+post.title+'</a>')元素。

Answer 2

设置callback(all_the_items.html());时，它将删除与DOM元素和变量关联的DATA，并将其转换为直接HTML。通过将其更改为：callback(all_the_items);它将起作用。

将HTML5 DATA属性添加到存储在Javascript变量

2 个答案: