Question

第一次玩jQuery Mobile但是稍微使用了jQuery。我希望得到一些快速的建议。

我正在解析头部中的一些xml并将数据作为列表写入div中＆lt; li＆gt;标签。列表出现在那里，但没有使用jQuery Mobile的默认样式进行格式化。我确定我做错了但是无法弄清楚我需要做什么才能应用这种风格，或者我需要将数据放在“准备好”之外。这是我的代码。

这是一件非常简单的事情，我很想念。如果我在＆lt; li＆gt;中硬编码HTML中的标签工作正常，但如果我使用.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>

嘿。非常感谢SOOO这个回复。我想我正在搜索错误的关键字因为我无法在任何地方找到这个并且在过去的几天里一直困扰着。我真的很感激这里的帮助。我正准备转向jqTouch作为一个选项，但我很乐意让这个工作。我想我差不多了。

我尝试添加这个：

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

但它没有影响任何事情。

然后我补充说：

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

影响了链接颜色，但没有根据间距等对行进行样式设置

然后我做了一些挖掘，并在我错过的文档中找到了这个：

如果您将项目添加到列表视图中，那么您将会这样做需要调用refresh（）方法它来更新样式并创建任何样式添加的嵌套列表。对于例如，$（'ul'）。listview（'refresh'）;

所以我用这一行替换了page（），它的工作非常光彩。

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

Answer 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有一些问题）
查看是否正在调用成功函数

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

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

1 个答案: