jQuery 解析 XML 在 jQuery Mobile 列表中显示 UL UL 仅返回 XML 中的最后一项

Question

我正在使用 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

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

在 Firebug 中，我可以看到所有子区域都在那里，但关系不知何故变得困惑......

如何单击第一个父 LI 并获取该父的子项？

这是我的 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>jdoe@email.com</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>sjones@email.com</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>htree@email.com</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>uyuri@email.com</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>

Answer 1

只需将 $('#list').listview('refresh'); 放在 .each() 之后即可!