在存储在变量中的html上设置隐藏数据

Question

我试图将一些数据存储在我从AJAX响应中添加到DOM的一些html（li元素）中。但是它似乎不正确，因为我无法在Firebug中找到它或检索它。

我无法弄清楚如何成功设置数据而不使用html中我不想做的数据属性。

$.each(r.results, function(i, item) {
$tpl  = '<li>';
$tpl += '<figure>';
$tpl += '<img src="' + item.image + '" alt="' + item.name + '">';
$tpl += '</figure>';
$tpl += '</li>';
$($tpl).find('li').data('item-id', item.id);
$('#children ul').append($tpl);
});

Answer 1

$.each(r.results, function(i, item) {
    var $tpl  = '<li>';
    $tpl += '<figure>';
    $tpl += '<img src="' + item.image + '" alt="' + item.name + '">';
    $tpl += '</figure>';
    $tpl += '</li>';
    var $nodes = $($tpl);
    $nodes.data('item-id', item.id);
    $('#children ul').append($nodes);
});