![](/img/trans.png)
[英]Dynamically populating <li> within jQuery Mobile data-role=listview
[英]JQuery Mobile - span refresh within li
动态范围已添加到li-失去了ListView的JQuery-Mobile格式。 他们有没有刷新跨度的方法?
更新的代码:
显示其他代码和html部分,listview将不会刷新或以标准移动查询格式设置格式:
<div data-role="page" data-theme="b" id="one" data-add-back-btn="true">
<div data-role="header">
<h1>CHATS</h1>
<a class="ui-btn-right" id="infoButton" onclick="emptyRegions();">Refresh</a>
</div><!-- /header -->
<div data-role="content" data-theme="b" id="regions">
<div data-role="content">
<ul data-role="listview" data-inset="true" id="timeStatus">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible" id="collapsible3">
<h4>Regions I, II, III</h4>
<ul data-role="listview" data-inset="true" id="region3">
<!-- AJAX CONTENT -->
</ul>
</div>
$.get(URL_R3, function(data) {
$(data).find("tr:has(td.Chats)").each(function () {
var $li = $('#region3').append('<li></li>');
var $tds = $(this).find('td');
$li.append('<span class="countyHx">' + $tds.eq(0).html() + '</span><br>'
+ '<span style="width: 20%; background-color: yellow;">'
+ $tds.eq(1).html() + '</span>'
+ '<span style="width: 20%; background-color: red;">'
+ $tds.eq(2).html() + '</span>'
+ '<span style="width: 20%; background-color: green;">'
+ $tds.eq(3).html() + '</span>'
+ '<span style="width: 20%; background-color: orange;">'
+ $tds.eq(4).html() + '</span>'
+ '<span style="width: 20%; background-color: purple;">'
+ $tds.eq(5).html() + '</span>');
});
$('#region3').listview('refresh');
}, 'html')
多亏了Omar,解决方案很简单,只需将跨度包装在li中,我就创建了li elseware并将其附加到ul。
$(data).find("tr:has(td.Chats)").each(function () {
var $li = $('#region3'); //.append('<li></li>');
var $tds = $(this).find('td');
var txtcolor = $( this ).css( "color" );
$li.append('<li style="height: 24px;"><span>' + $tds.eq(0).html() + '</span><br>'
+ '<span style="float: left; width: 20%; height: 24px; background-color:'
+ $tds.eq(1).css("background-color") + '; color:' + $tds.eq(1).css("color") + ';">'
+ $tds.eq(1).html() + '</span>'
+ '<span style="float: left; width: 20%; height: 24px; background-color:'
+ $tds.eq(2).css("background-color") + '; color:' + $tds.eq(2).css("color") + ';">'
+ $tds.eq(2).html() + '</span>'
+ '<span style="float: left; width: 20%; height: 24px; background-color:'
+ $tds.eq(3).css("background-color") + '; color:' + $tds.eq(3).css("color") + ';">'
+ $tds.eq(3).html() + '</span>'
+ '<span style="float: left; width: 20%; height: 24px; background-color:'
+ $tds.eq(4).css("background-color") + '; color:' + $tds.eq(4).css("color") + ';">'
+ $tds.eq(4).html() + '</span>'
+ '<span style="float: left; width: 20%; height: 24px; background-color:'
+ $tds.eq(5).css("background-color") + '; color:' + $tds.eq(5).css("color") + ';">'
+ $tds.eq(5).html() + '</span></li>');
});
$('#region3').listview('refresh');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.