javascript - 使用包含 jQuery.data 的 document.createDocumentFragment() 子 dom 元素

Question

我想使用 document.createDocumentFragment() 创建一个优化的 HTML 元素集合，其中包含来自 jQuery (v 1.4.2) 的“.data”，但我有点卡住了关于如何从 HTML 元素中获取数据。

这是我的代码:

var genres_html = document.createDocumentFragment();
$(xmlData).find('genres').each(function(i, node) {
    var genre = document.createElement('a');
    $(genre).addClass('button')
        .attr('href', 'javascript:void(0)')
        .html( $(node).find('genreName:first').text() )
        .data('genreData', { id: $(node).find('genreID:first').text() });
    genres_html.appendChild( genre.cloneNode(true) );
});

$('#list').html(genres_html);

// error: $('#list a:first').data('genreData') is null
alert($('#list a:first').data('genreData').id);

我在这里做错了什么？我怀疑当元素附加到 documentFragment 时，.cloneNode() 可能没有携带数据。有时会有大量的行，所以我想在速度方面保持相当优化。

谢谢!

Answer 1

您正在 jQuery 对象上运行 cloneNode。您从 native API 开始，然后将其转换为 jQuery 对象，然后切换回来。

我想你可以这样做:

genres_html.appendChild( genre.get(0).cloneNode(true) );

但我怀疑你会丢失你的数据。

---

编辑:

如果你想要 jQuery，而不是创建一个片段，尝试创建一个空的 jQuery 对象，然后将每个流派放入其中:

var genres_html = $();
...
genres_html.push( genre );

---

编辑:

试一试。我不是 DOM 专家，但它可能对您有用。

var genres_html = document.createDocumentFragment();
$(xmlData).find('genres').each(function(i, node) {
    var genre = document.createElement('a');
    genre.setAttribute('class','button');
    genre.setAttribute('href', 'javascript:void(0)');
    var $node = $(node);
    genre.setAttribute('genreData', $node.find('genreID:first').text() );
    genre.innerHTML = $node.find('genreName:first').text();
    genres_html.appendChild( genre.cloneNode(true) );   // Not sure why you would need to make a clone??
});

var list = document.getElementById('list');
list.appendChild(genres_html);

// error: $('#list a:first').data('genreData') is null
alert($('#list a:first').attr('genreData'));

让我知道它是否有效。

编辑:使用 innerHTML 更改了我的错误

EDIT2:使用原生 innerHTML 附加到 #list