我正在使用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
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>
解决方法
只需输入$(‘#list’).listview(‘refresh’);在.each()之后就是这样!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。