动态范围添加到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')
答案 0 :(得分:0)
感谢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');