2013-10-04 52 views
0

添加到li的动态范围 - 丢失了listview的JQuery-Mobile格式。他们是重新刷新跨度的一种方式吗?JQuery Mobile - 在li内部刷新范围

更新的代码:

显示额外的代码和HTML部分,列表视图不会刷新或标准查询移动格式格式:

<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

你不能刷新'span'而不是'li'。向我们展示“静态”你想要达到的目标,这样我们就可以理解问题所在。在你之前的问题中,你说你想横向不横向。 – Omar

+0

参见小提琴的例子,布局是我想要的,只是没有格式化在JQuery-Mobile http://jsfiddle.net/MvHTR/7/ – BarclayVision

+0

这个http://jsfiddle.net/Palestinian/MvHTR/13/? – Omar

回答

0

由于奥马尔的解决办法很简单,只是包装跨度在li中,我创建了其他的软件并将其添加到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');