如何在列表視圖中獲取父標記以及如何在單擊特定父項時獲取其子標記

我對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>

我想輸出像：

所有的父母使用屬性名稱，比如在列表視圖：

勾引你的伴侶愛之觸。。。

所以當我點擊「勾引你的伴侶」時，我想讓這個標籤下的列表視圖中的孩子。

在此先感謝..

感謝ü其工作正常，但美國可以PLZ檢查這一個與我的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'); 

    }); 
} 
}); 
});

我得到父母的列表視圖與name屬性，但是當我點擊父母的每個人都獲得每一個鏈接相同的東西，並在單個列表中顯示內容。

你可以解決這個問題獲得解決方案，因爲每個家長只能在列表視圖中獲得他們的子女內容。

來源

2013-04-24 user2139922

嘿，夥計，看看這個http://stackoverflow.com/questions/14583461/find-特別是node-child-element-from-xml-using-jquery – dreamweiver 2013-04-24 06:20:09

感謝您的建議，但我試過這一個，我沒有得到解決方案。請給出這個XML示例的代碼示例。 – user2139922 2013-04-24 06:25:33

：檢查代碼片段 – dreamweiver 2013-04-24 06:48:08

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

編碼愉快:)

來源

2013-04-24 06:47:14 dreamweiver

感謝您給予回覆哥們，但我沒有得到任何東西。我只得到只有頁眉和頁腳.. – user2139922 2013-04-24 08:04:14

上面的代碼將生成列表變量中的子元素列表，我想你需要知道你必須顯示最終**列表**（變量）的目標元素。 '$（'＃targetEle'）。text（list）;' – dreamweiver 2013-04-24 08:40:10

是的，我設定目標變量，但仍然得到相同的我不知道我在做什麼，但當我試圖以這種方式我得到的東西可以üplz檢查此代碼一次 – user2139922 2013-04-24 09:11:50

如何在列表視圖中獲取父標記以及如何在單擊特定父項時獲取其子標記

回答

相關問題