Использование document.createDocumentFragment() дочерних элементов dom, содержащих jQuery.data

Question

Я хочу использовать document.createDocumentFragment() для создания оптимизированной коллекции элементов HTML, содержащих «.data», исходящие из jQuery (v 1.4.2), но я вид застрял в том, как получить данные на поверхность из элементов 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

Вы используете cloneNode объект jQuery. Вы начинаете с родного API, а затем конвертируете его в объект jQuery, а затем переключаете обратно.

Я полагаю, вы могли бы сделать:

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

Но я подозреваю, что вы потеряете data.

---

EDIT:

Если вы хотите JQuery, вместо того, чтобы создать фрагмент, попробуйте создать пустой объект JQuery, то толкая каждый жанр в него:

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

---

EDIT:

Попробуйте. Я не эксперт 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')); 

Сообщите мне, если это будет работать.

EDIT: изменил мою ошибку с 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); 

Спасибо за тонну за помощь! Я думаю, проблема заключалась в отсутствии .get (0) при добавлении его в documentFragment. Он loks как .get (0) также возвращает данные нетронутыми!

Показатели производительности по-прежнему являются TBD. Я знаю, что jQuery 1.4 использует documentFragments, но точно не знает, где/какие методы. По крайней мере, сейчас это работает! :)