使用jQuery正確解析XML但CSS不起作用

第一次使用jQuery Mobile，但已經使用了一點jQuery。希望得到一些快速建議。使用jQuery正確解析XML但CSS不起作用

我解析了一些xml的頭部，並將數據寫入一個div中的列表<li>標籤。該列表出現在那裏，但沒有使用jQuery Mobile的默認樣式格式化。我敢肯定，我做錯了什麼，但無法弄清楚我需要做什麼來應用這種風格，或者我需要獲取「準備就緒」以外的數據。這是我的代碼。

它必須是那麼簡單，我失蹤了。如果我在HTML中的<li>標籤中硬編碼，那麼它工作正常，但如果我使用.append（），它將不顯示列表的格式。

會真正感謝您可能有的任何提示。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Chart</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.0a2.min.css" /> 
    <script src="js/jquery-1.4.4.min.js"></script> 
    <script src="js/jquery.mobile-1.0a2.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() 
{ 
    $.ajax({ 
    type: "GET", 
    url: "xml/vc-data.xml", 
    dataType: "xml", 
    success: function(xml){ 
     // build country list 
     var currentCountry = ""; 
     var currentRegion = ""; 
     $("#countries").html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>'); 
     $(xml).find("charts").each(function() 
     { 
      var country = $(this).find('country').text(); 
      var region = $(this).find('region').text(); 
      if(currentCountry != country) { 
       //countryList += "<li><a href='#'>" + country + "</a></li>"; 
       $("<li data-role='list-divider'></li>") 
       .html(country) 
       .appendTo("#countries ul"); 
      } 
      if(currentRegion != region) { 
      $("<li></li>") 
       .html("<a href='#'>" + region + "</a>") 
       .appendTo("#countries ul"); 
      } 
      currentCountry = country; 
      currentRegion = region; 
     }); 
    } 
    }); 
}); 

</script> 
</head> 
<body> 

<!-- Start of first page --> 
<div data-role="page"> 

    <div data-role="header"> 
     <h1>Charts</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="countries" > 

    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html>

嘿。非常感謝這個回覆。我想我正在用錯誤的關鍵字搜索，因爲我無法在任何地方找到它，並在過去幾天陷入困境。我真的很感謝這裏的幫助。我正要轉向jqTouch作爲一個選項，但很想得到這個工作。我想我快到了。

我嘗試添加此：

$("#countries > ul").page();

，但它並沒有什麼影響。

然後我又說：

$("#countries div > ul").page();

影響了鏈接的顏色但沒有風格的行處均採用間距等

然後我做了一些更多的挖掘，發現這個文檔中，我錯過：

如果將項目添加到一個列表視圖，你需要調用刷新（）方法它更新的款式和創建任何已添加的嵌套列表。例如，對於，$（'ul'）。listview（'refresh'）;

因此，我用這行代替了page（），它的工作光榮。

$("#countries div > ul").listview('refresh');

來源

2010-12-10 dave

這不是一件簡單的事情，你錯過了。一旦jQuery移動完成後，它不會自動格式化新創建的東西。我想這應該是一場表演。

您必須將jQuery mobile .page()方法應用到您創建的最頂層元素。

在你的情況下，我覺得應該是：

$("#countries>ul").page();

詳細HOWTO：http://jquerymobiledictionary.dyndns.org/faq.html

（「我如何JQM工作，我的內容添加到DOM？「問題）

[編輯]

我假設#countries是裏面的內容股利和您所創建的UI元素。你沒看我掛教程。你絕對必須創建一個新的包裝元素，在HTML源代碼中不存在任何元素可以.page()使用，因爲它已經是

使用此HTML

<div id="countries" data-role="page">  
    <div data-role="header"> 
     <h1>Chart</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="here"> 

    </div><!-- /content --> 
</div>

這個代碼成功功能：

success: function(xml){ 
      // build country list 
      var currentCountry = ""; 
      var currentRegion = ""; 
      $('#here').html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>'); 
      var $here=$('#here > ul'); 

      //var countryList = ""; 
      $(xml).find("chart").each(function() 
      { 
       var country = $(this).find('country').text(); 
       var region = $(this).find('region').text(); 
       if(currentCountry != country) { 
        $("<li></li>").html(country).appendTo($here); 
       } 
       if(currentRegion != region) { 
        $("<li></li>").html("<a href='#'>" + region + "</a>").appendTo($here); 
       } 
       currentCountry = country; 
       currentRegion = region; 
      }); 

      $here.page(); 
     }

如果它不工作，檢查這些東西：

你應該使用jQuery的1.4.3（1.4.4與JQM一些問題）
看到，如果成功的功能是被稱爲

我測試了它，它爲我工作。

來源

2010-12-13 18:25:14 naugtur

我在這裏有同樣的問題：http://jsfiddle.net/UcrD8/6/有什麼建議嗎？ – 2011-03-09 16:23:43

使用jQuery正確解析XML但CSS不起作用

回答

相關問題