Question

我对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');

    });
}
 });
});

我正在获取具有姓名属性的父母的列表视图，但是当我点击父母的任何人为每个链接获取相同的内容时，以及它在单个列表中显示内容。

你能解决这个问题，因为每个家长只能在listview中获得他们的孩子内容。

Answer 1

 $(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()。

从子节点获取父节点

编辑：以上代码已更新且其工作副本 HERE

快乐编码：）

如何在列表视图中获取父标记以及在单击特定父级时如何获取其子标记

1 个答案: