JavaScript:为子项附加样式和循环

Question

我需要实现以下目标：

<ul data-role="listview">
<li data-icon="false">
<!--loop content here-->
</li>
</ul>

使用 JavaScript。我认为附加孩子可以解决问题。你能告诉我如何使用附录来达到这个结果吗？我尝试了以下方法：

$(document).ready(function() {
$(document).bind('deviceready', function() {
    //Phonegap ready
    onDeviceReady();
});

//var output = document.getElementById("output");
var _ul = document.createElement('ul');
var _li=  document.createElement('li');
_ul.setAttribute("data-role", "listview");
_li.setAttribute("data-icon", "false");
$.ajax({
    url: 'json_encoded_db.php',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status){
        $.each(data, function(i,item) { 
            _li.innerHTML = 
            '<a href="" id="'+item.id+'">'+
            '<img src="images/'+item.img+'">'+
            '</a>'; 
            _ul.appendChild(_li.cloneNode(true));
        }); 
    },
    error: function(){
       output.text('There was an error loading the data.');
    }
});
document.getElementById("output").appendChild(_ul);
});

但它不起作用，我的意思是，它是一个没有任何样式的列表，显然没有获得数据角色属性。（显然它可以从数据库中获取数据，我测试过它）。

Answer 1

在

successCallback 的 $.each（） 中移动此代码。所以你的 $.each（） 将看起来像这样：

$.each(data, function(i,item) { 
    var _li=  document.createElement('li');
    _li.setAttribute("data-icon", "false");
    _li.innerHTML = 
        '<a href="" id="'+item.id+'">'+
        '<img src="images/'+item.img+'">'+
        '</a>'; 
        _ul.appendChild(_li);
}); 

还要摆脱克隆"_li"