Question

我需要实现以下目标：

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

使用JavaScript。我认为追加孩子会做到这一点。你能告诉我如何使用appendchild来实现这个结果吗？我尝试了以下方法：

$(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'

JavaScript：使用样式和循环追加子项

1 个答案: