使用 jQuery 正确解析 XML 但 CSS 不生效答案

【问题标题】：Parsing XML correctly with jQuery but CSS does not take effect使用 jQuery 正确解析 XML 但 CSS 不生效
【发布时间】：2010-12-10 19:52:52
【问题描述】：

第一次玩 jQuery Mobile，但是用过一点 jQuery。希望得到一些快速的建议。

我正在解析头部中的一些 xml，并将数据作为列表写入带有

标记的 div 中。该列表出现在那里，但没有使用 jQuery Mobile 的默认样式进行格式化。我确定这是我做错的事情，但无法弄清楚我需要做什么才能应用该样式，或者我可能需要在“准备好”之外获取数据。这是我的代码。

它一定很简单，以至于我错过了。如果我在 HTML 中的

标记中进行硬编码，它可以正常工作，但如果我使用 use .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();

这会影响链接颜色，但根本没有用间距等设置行样式。

然后我进行了更多挖掘，并在我错过的文档中找到了这个：

如果您将项目添加到列表视图，您将需要调用 refresh() 方法它来更新样式并创建任何添加的嵌套列表。为了例如，$('ul').listview('refresh');

所以我用这一行替换了 page() 并且它工作得很好。

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

【问题讨论】：

标签： jquery mobile webkit jquery-mobile

【解决方案1】：

您缺少的不是一件简单的事情。完成后，jQuery mobile 不会自动格式化新创建的内容。我想这将是一个性能猪。

您必须将 jQuery mobile .page() 方法应用于您创建的最顶层元素。

在你的情况下，我认为应该是：

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

详细方法：http://jquerymobiledictionary.dyndns.org/faq.html

（“如何让 JQM 处理我添加到 DOM 的内容？”问题）

[编辑]

我假设#countries 是内容中的一个 div，而您创建了 ul 元素。您没有阅读我链接到的教程。您绝对必须创建一个新的包装元素。 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 存在一些问题）
看看是否调用了success函数

我测试了它，它对我有用。

【讨论】：