使用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');

答

这不是一件简单的事情，你错过了。一旦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一些问题）
看到，如果成功的功能是被称为

我测试了它，它为我工作。

我在这里有同样的问题：http://jsfiddle.net/UcrD8/6/有什么建议吗？ – 2011-03-09 16:23:43

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

相关推荐