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

Question

我想使用document.createDocumentFragment()創建一個包含來自jQuery（v 1.4.2）的「.data」的HTML元素的優化集合，但我是有種如何從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）一樣也返回完整的數據！

績效收益仍然待定。我知道jQuery 1.4使用documentFragments，但不完全確定哪裏/哪些方法。至少現在這個工程雖然！ :)