jQuery移动创建表没有正确循环xml

时间:2012-05-07 21:42:31

标签: javascript jquery xml jquery-mobile

当我没有类或任何东西时,我的xml解析正在进行并循环,但我现在正尝试使用jquery mobile设置它。我必须以这种方式创建列表,以便在加载后通过jquery应用样式。但它只是加载列表中的第一个结果。如果我警告$(this).text()我得到5个回答是正确的。但是以下代码无效。

$(document).ready(function() {

                             $.ajax({
                                    type: 'GET',
                                    url: 'test.xml',
                                    dataType: 'xml',
                                    success: function(xmlDoc) {
                                    var $xml = $(xmlDoc);
                                    $xml.find('FirstName').each(function() {
                                                                $("#list").html('<li ><a href="acura.html">' + $(this).text() + '</a></li>');
                                                                $("#list").listview('refresh');
                                                                });

                                    }
                                    });



            });

继承人html:

 <body>
        <div data-role="page">

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

           <ul id="list" data-role="listview"></ul><!-- /content -->

            <div data-role="footer">
                <h4>Footer content</h4>
            </div><!-- /footer -->

        </div>
    </body>

2 个答案:

答案 0 :(得分:1)

 $("#list").html('<li ><a href="acura.html">' + $(this).text() + '</a></li>');

在这里,你在每个循环中设置一个新的html,

像这样改变,

 $("#list").append('<li ><a href="acura.html">' + $(this).text() + '</a></li>');

答案 1 :(得分:1)

.html(SONETHING)与执行.empty().append(SOMETHING)是一回事。你应该如何缓冲你将附加到DOM的内容并立即附加所有内容,因为这是一个代价高昂的过程。

                         $.ajax({
                                type: 'GET',
                                url: 'test.xml',
                                dataType: 'xml',
                                success: function(xmlDoc) {
                                    var $xml = $(xmlDoc),
                                        out  = [];//create array to buffer output
                                    $xml.find('FirstName').each(function() {

                                        //add this index to the buffer array
                                        out.push('<li ><a href="acura.html">' + $(this).text() + '</a></li>');
                                    });

                                    //select the #list element only once, replace the HTML all at once, then refresh
                                    $("#list").html(out.join('')).listview('refresh');

                                }
                        });

了解如何使用数组存储一堆混合在一起的HTML字符串。此外,如果您只想添加新的列表项而不是覆盖现有列表项,则可以将.html()替换为.append()

.append()的文档:http://api.jquery.com/append