0

我对 jquery 很陌生。任何人都可以帮助我在列表视图中获取父级，当我们单击特定父级时，我们必须获取相应的子级。

我的 XML 文件：

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <page count="56" name="ebook">
    <sections>
    <section count="7" name="Seduce Your Partner" order="1">
      <content file="93828.txt" order="1">Balmy with rich perfumes</content>
      <content file="93829.txt" order="2">Wear a fine dress</content>
      <content file="93830.txt" order="3">Welcome to Love Abode</content>
      <content file="93831.txt" order="4">Rekindle your love</content>
      <content file="93832.txt" order="5">Flower a love messanger</content>
      <content file="93833.txt" order="6">Perfumes and Aromas</content>
      <content file="93834.txt" order="7">Gain a women&amp;apos;s heart</content>
    </section>
    <section count="6" name="The Touch of Love" order="2">
      <content file="93835.txt" order="8">A Love Message</content>
      <content file="93836.txt" order="9">An awakening kiss</content>
      <content file="93837.txt" order="10">Heading South with Confidence</content>
      <content file="93838.txt" order="11">Caressing</content>
      <content file="93839.txt" order="12">Stroking</content>
      <content file="93840.txt" order="13">Blows &amp;amp; Cries</content>
    </section>
    <section count="8" name="Beyond Touch" order="3">
      <content file="93841.txt" order="14">Watch, Listen &amp;amp; Experiment</content>
      <content file="93842.txt" order="15">Blindfolded</content>
      <content file="93843.txt" order="16">Embrace of Jaghana</content>
      <content file="93844.txt" order="17">Piercing Embrace</content>
      <content file="93845.txt" order="18">Twining of a Creeper</content>
      <content file="93846.txt" order="19">Line of Jewels</content>
      <content file="93847.txt" order="20">Token of Remembrance</content>
      <content file="93848.txt" order="21">Oils and Lotions</content>
    </section>
  </sections>
</page>

我的 HTML 文件：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>XML File</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type='text/javascript'></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type='text/javascript'></script>

    <script src="script1.js" type='text/javascript'></script>
</head>
<body>
<!-- Home Page -->
    <div data-role="page" id="home">
        <div data-role="header" data-theme="a">
            <h1>Mobile Viewer</h1>
        </div>
        <div data-role="content">
            <ul id="section_list" data-role="listview">
            <!-- <ul id="content_list" data-role="listview">
            </ul> -->
            </ul>
        </div>

        <div data-role="footer" data-theme="a">
            <h1>Footer</h1>
        </div>
    </div>

<!-- Chapter Page -->
    <div data-role="page" id="chapter">
        <div data-role="header" data-position="fixed" data-theme="a">
            <a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
            <h1></h1>
            <a href="" data-role="button" class="next" data-icon="forward" data-iconpos="notext">Next</a>
        </div>

        <div data-role="content">
            <ul id="content_list" data-role="listview">
            </ul>
        </div>

        <div data-role="footer" data-theme="a">
        </div>
    </div>

</div>
</body>
</html>

我想要输出像：

所有父母都在使用属性名称的列表视图中，例如：

用爱之触引诱您的伴侣。. .

所以当我点击“勾引你的伴侣”时，我想让孩子们在这个标签下的列表视图中。

提前致谢..

谢谢你它工作正常，但你可以用我的 html 页面检查这个：

$(document).ready(function()

{
  $.ajax({
    type: "GET",
    url: "449.xml",
    dataType: "xml",
    success: function parseXml(xml)
    {

    $(xml).find('section[name]').each(function() {

             var section = $(this).attr("name");

        $("#section_list").append('<li><a href='+ "#chapter" + ' id="">' + section + '  </a> </li>');

        $("#section_list").listview('refresh');

    });

    $(xml).children().each(function() {

    var content = $(this).text();   

    $("#content_list").append('<li><a href='+ "#" + 'id="" ">' + content + ' </a> </li> ');

    $("#content_list").listview('refresh');

    });
}
 });
});

我正在获取具有名称属性的父母的列表视图，但是当我单击父母中的任何人时，每个链接都会获得相同的内容，并且它还会在单个列表中显示内容。

你能解决这个问题以获得解决方案，因为每个父母只能在列表视图中获得他们的孩子内容。

4

1 回答 1

0 
 $(document).ready(function () {

       $('#button').on('click',function() {
            // getting all child elements based on the parent name
                var parNode="Seduce Your Partner";
                var data='<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>........... ';
                var list='';
                //$.get('sample.xml', null, function (data, textStatus) {
                        list='<ul>';
                        $(data).find('sections section[name="Seduce Your Partner"]').children().each(function () {
                            list+='<li>'+$(this).text()+'</li>';
                        });
                         list+='<ul>';
            //}, 'xml');
                $('#targetDiv').text(list);

      } );

});

此代码用于获取所有子元素。我想您会知道如何获取父节点的名称，因为那是上述代码的输入。

同样，您可以使用从子节点获取父节点的引用。closest().

编辑：上面的代码已经更新，它的工作副本在 这里

快乐编码:)

于 2013-04-24T06:47:14.880 回答