jQuery Mobile列表中的jQuery Parse XML显示UL仅返回XML中的最后一项 [英] jQuery Parse XML display in jQuery Mobile list UL UL returning last item in XML only

问题描述

我正在使用jQuery Mobile 1.1.1和jQuery 1.7.1. jQuery mobile可以具有嵌套列表，并且在单击时可以在另一个屏幕上显示下一个ul.请参见以下示例: http ://jquerymobile.com/demos/1.1.1/docs/lists/lists-nested.html#& ui-page = 0-8

I am using jQuery Mobile 1.1.1 and jQuery 1.7.1. JQuery mobile can have a nested list and on click can show the next ul in another screen. See this example: http://jquerymobile.com/demos/1.1.1/docs/lists/lists-nested.html#&ui-page=0-8

我正在尝试通过解析数据的XML文件来做到这一点.我没有列出列表内容的问题，但是，在单击第一个父项时，我总是得到最后一个父项的子项.

I am trying to do this by parsing an XML file of data. I have no problem listing the contents of the list, however, on click of the FIRST parent item, i always get the child of the LAST parent item.

在Firebug中，我可以看到那里的所有Children区域，但是这种关系以某种方式变得混乱...

Looking in Firebug, I can see that all the Children area there, but the relationship is getting messed up somehow...

如何单击第一个父级LI并获取该父级的子级?

How can I click on the first parent LI and get the children of that parent?

这是我的带有jquery/mobile cdn的脚本部分:

Here is my script section with jquery/mobile cdn:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var xml;
    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: xmlParser
        });
    });
        //loading XML file and parsing to .main div.
        function xmlParser(data) {
            xml = data;

            $('#load').fadeOut();

            $(xml).find("Employee").each(function () {
                name = $(this).attr("name");
                var email = $(this).find("email").text();
                var jobtitle = $(this).find("jobtitle").text();
                var address = $(this).find("address").text();
                var workphone = $(this).find("workphone").text();
                var homephone = $(this).find("homephone").text();
                var cellphone = $(this).find("cellphone").text();
                var fax = $(this).find("fax").text();

                $("#list").append('<li><h3 id="name">' + name + '</h3><ul><li>Email: '+ email + '</li><li>Job Title: '+ jobtitle + '</li><li>Address: '+ address + '</li><li>Work Phone: '+ workphone + '</li><li>Home Phone: '+ homephone + '</li><li>Cell Phone: '+ cellphone + '</li><li>Fax: '+ fax + '</li></ul></li>');

                $('#list').listview('refresh'); 
            });
        }

</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

这是html:

<div data-role="page">
  <div data-role="header" data-theme="a">
    <h1>Employees</h1>
  </div>
  <!-- /header -->
  <div data-role="content">
    <div class="content-primary">
      <ul id="list" data-role="listview" data-theme="a" data-filter="true">
      <li id="load">Loading Data...</li>
      </ul>
      <ul id="results" data-role="listview" data-theme="a">
      </ul>
    </div>
    <!-- /contentprimary --> 
  </div>
  <!-- /content -->
  <div data-role="footer" data-theme="a">
    <div data-role="navbar">
      <p align='center'>::: Footer :::</p>
    </div>
    <!-- /navbar --> 
  </div>
  <!-- /footer --> 
</div>
<!-- /page -->

这是示例xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<THEEmployees xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Employee name="John Doe">
    <email>[e-mail]</email>
    <jobtitle>Software Engineer</jobtitle>
    <address>San Bernardino, CA</address>
    <workphone>555-555-1212</workphone>
    <homephone>444-555-1212</homephone>
    <cellphone>333-555-1212</cellphone>
    <fax>N/A</fax>
    <contractor>No</contractor>
  </Employee>
  <Employee name="Sam Jones">
    <email>[e-mail]</email>
    <jobtitle>Sotware Developer</jobtitle>
    <address>San Francisco, CA</address>
    <workphone>888-888-8888</workphone>
    <homephone>999-999-9999</homephone>
    <cellphone>101-010-1010</cellphone>
    <fax>555-555-6666</fax>
    <contractor>No</contractor>
  </Employee>
  <Employee name="Hank Tree">
    <email>[e-mail]</email>
    <jobtitle>Software Developer</jobtitle>
    <address>Everett, WA</address>
    <workphone>898-899-9955</workphone>
    <homephone>456-564-5566</homephone>
    <cellphone>899-999-9989</cellphone>
    <contractor>Yes</contractor>
  </Employee>
  <Employee name="Urki Yuri">
    <email>[e-mail]</email>
    <jobtitle>Project Engineer</jobtitle>
    <address>Washington DC</address>
    <workphone>222-222-2222</workphone>
    <cellphone>222-222-2222</cellphone>
    <fax>569-596-5696</fax>
    <contractor>No</contractor>
  </Employee>
</THEEmployees>

推荐答案

只需将$('#list').listview('refresh');放在.each()之后就可以了！

Just put $('#list').listview('refresh'); after .each() and that's it!!

这篇关于jQuery Mobile列表中的jQuery Parse XML显示UL仅返回XML中的最后一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！