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

我在这里做错了什么？我怀疑当元素附加到.cloneNode()时，documentFragment可能没有传递数据。有时会有很多行，所以我希望保持速度非常优化。

谢谢！

Answer 1

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

我想你可以这样做：

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

但后来我怀疑你会失去你的data。

修改

如果你想要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

Answer 2

抱歉，我不是很清楚 - 我希望使用documentFragments获得性能，但需要jQuery的“清洁度”。 :)虽然很棒，我想我想出来了！


var genres_list = document.createDocumentFragment();
$(xmlData).find("genres").each(function(i, node) {
    genres_list.appendChild(
        $('<a></a>').addClass('button')
            .attr('href', 'javascript:void(0)')
            .html('Anchor Text Here')
            .data('genreData', {id: 2000})
            .get(0) // ah-ha!
        )
    );
});

$('#list').append(genres_list);

// alerts 2000
alert($('#list').find('a:first').data('genreData').id);

非常感谢您的帮助！我认为问题是将其附加到documentFragment时缺少.get（0）。它像.get（0）一样也能完整地返回数据！

性能提升仍然是TBD。我知道jQuery 1.4使用documentFragments但不确定哪里/哪些方法。至少这个现在可行了！：）

使用包含jQuery.data的document.createDocumentFragment（）子dom元素

2 个答案: