添加HTML5 DATA属性元素存储在Javascript变量

Add HTML5 DATA attributes to Element stored in Javascript variable

本文关键字：Javascript 变量 存储 元素 HTML5 DATA 属性 添加      更新时间：2023-09-26

我正在遍历AJAX请求，并将结果中的<li>列表添加到<ul>。

我遇到的麻烦是存储从这些项目的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());
        }
     }      
  });
}

10我调用函数并将HTML附加到目标<div>:

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

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

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

任何想法?

------ EDIT 5/21/15 3:38pm -------

我使用jQuery data函数访问数据，如下:

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

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

如果我正确地收集你的问题，你想做的(在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);

另一个问题，我看到你的代码是，如果张贴。title包含格式不正确的HTML，当您调用$('<a>'+post.title+'</a>')时，它可能会破坏<a>元素。

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

相关文章：