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()之后就可以了！

Answer 2

$("#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');
<!-- Put It Here -->

jQuery中的jQuery Parse XML显示移动列表UL UL仅返回XML中的最后一项

2 个答案: