JQuery Mobile - 在li内部刷新

时间:2013-10-04 15:35:44

标签: javascript jquery jquery-mobile

动态范围添加到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')

1 个答案:

答案 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');