Javascript 添加列表元素后将css应用于listview
在获取数据后,我将使用JSON向列表中添加元素,我将执行以下操作:Javascript 添加列表元素后将css应用于listview,javascript,jquery,css,jquery-mobile,jquery-mobile-listview,Javascript,Jquery,Css,Jquery Mobile,Jquery Mobile Listview,在获取数据后,我将使用JSON向列表中添加元素,我将执行以下操作: success: function(data){ var list = $('#' + HTMLfieldName[index] + 'Ul'); $.each(data, function() { newLi = document.createElement('li'); ref = document.createElement('a'); ref.innerHTML = t
success: function(data){
var list = $('#' + HTMLfieldName[index] + 'Ul');
$.each(data, function() {
newLi = document.createElement('li');
ref = document.createElement('a');
ref.innerHTML = this.description;
ref.href = '#' + this.code;
newLi.appendChild(ref);
list.append(newLi);
});
}
这很好,但是列表中的元素显示为普通href(蓝色和下划线),而不是listview示例中使用的漂亮CSS
以下是渲染后代码的外观:
<ul class="levelUl ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" name="famUl" id="famUl">
<li><a href="#2930">Finishing</a></li>
<li><a href="#2910">Speciality Printing</a></li>
<li><a href="#2900">Toner</a></li>
</ul>
如果我将代码粘贴到HTML页面中,它看起来很好
在CSS添加到页面后,我是否需要执行一些操作来应用CSS?您必须通过以下方式在动态添加的listview元素上触发标记增强:
$('ul#id').listview('refresh'):
实例:
基本上,您的代码如下所示:
success: function(data){
var list = $('#' + HTMLfieldName[index] + 'Ul');
$.each(data, function() {
newLi = document.createElement('li');
ref = document.createElement('a');
ref.innerHTML = this.description;
ref.href = '#' + this.code;
newLi.appendChild(ref);
list.append(newLi);
});
list.listview('refresh');
}
请记住,您必须调用.listview('refresh')代码>
在每个循环之后
要了解更多信息,请阅读我的另一个,或查找它