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

发布于 2024-10-07 05:37:36 字数 2826 浏览 4 评论 0原文

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

我正在解析 head 中的一些 xml 并将数据作为列表写入 div 中，并使用

;标签。该列表出现在那里，但未使用 jQuery Mobile 的默认样式进行格式化。我确信我做错了，但无法弄清楚我需要做什么来应用该样式，或者也许我需要获取“准备就绪”之外的数据。这是我的代码。

这一定是非常简单的事情，我错过了。如果我在

中硬编码； 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>

嘿。非常感谢您的回复。我想我搜索的关键词是错误的，因为我在任何地方都找不到这个，并且在过去的几天里一直被困住。我真的很感谢这里的帮助。我正打算继续使用 jqTouch 作为一个选项，但很想让它发挥作用。我想我快到了。

我尝试添加这个：

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

但它没有影响任何东西。

然后我添加：

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

这影响了链接颜色，但根本没有设置行的间距等。

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

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

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

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

原文

First time playing with jQuery Mobile but have used jQuery a little bit. was hoping for some quick advice.

I am parsing some xml in the head and writing the data as a list in a div with <li> tags. The list appears there but is not formatted with the default styling from jQuery Mobile. I'm sure its something I'm doing wrong but can't figure out what I need to do to apply the style or maybe I need to get the data outside of "ready". Here's my code.

It's gotta be something so simple that i'm missing. If I hard code in the <li> tags in the HTML it works fine but if I use use .append() it shows no formatting for the list.

Would REALLY appreciate any tips you might have.

<!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>

Hey. Thanks SOOO Much for this reply. I guess I was searching with the wrong keywords cause I just couldnt find this anywhere and have been stuck the past few days. I REALLY appreciated the help here. I was just about to move on to jqTouch as an option but would love to get this working. I think I'm almost there.

I tried adding this:

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

but it didnt affect anything.

then I added:

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

which affected the link color but didnt style the rows at all with spacing, etc.

I then did some more digging and found this in the documentation that I missed:

If you add items to a listview, you'll
need to call the refresh() method on
it to update the styles and create any
nested lists that are added. For
example, $('ul').listview('refresh');

So I replaced page() with this line and it worked gloriously.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞花火° 2024-10-14 05:37:36

你所缺少的并不是一件简单的事情。完成后，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 存在一些问题）
查看是否正在调用成功

函数测试了一下，它对我有用。

It's not a simple thing you're missing. After it's done once jQuery mobile doesn't format newly created stuff automatically. I suppose it would be a performance hog.

You have to apply jQuery mobile .page() method to the topmost element that you create.

In your case I think it should be:

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

Detailed howto: http://jquerymobiledictionary.dyndns.org/faq.html

("How do I make JQM work with content I add to DOM?" question)

[edit]

I was assuming that #countries is a div inside the content and you create the ul element. You didn't read the tutorial I linked to. You absolutely have to create a new wrapping element. No element that existed in HTML source can be used with .page() because it already was.

Use this 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>

and this code for success function:

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();
        }

If it doesn't work check one of these things: