Question

我正在学习jquery，我正在尝试使用jquery从xml获取加载数据。我在listview中获取父标记，当我点击特定的父级时，它获取所有子标记所有的父母。

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>

这是我的xml文件。我得到了所有带有“name”属性的父标签，但问题是当我点击列表中的特定父标签时，它获取所有父标签的所有子标签。

在此处查看问题：http://jsfiddle.net/bhvxV/

任何人都可以帮助我找到解决方案，只能获得该父母的孩子。

先谢谢。

感谢Omar ..这就是我正在寻找但我又想知道“如何在子标签中打开文件”。例如在上面的xml文件中“我们有一个像下面这样的子标签为每个父母。

<content file="93828.txt" order="1">Balmy with rich perfumes</content>
      <content file="93829.txt" order="2">Wear a fine dress</content>

当我点击子标签示例时：Balmy有丰富的香水“93828.txt”文件必须打开。当我点击孩子们时如何打开这个文件。

例如“93828.txt”文件：“勾引你的伴侣”中的“富含香水的芳香”

<html><head><title></title></head><body>
<div id="mobi_content"><h1>Balmy with rich perfumes</h1><div id="dataSectionInstanceId-182047" class="mobifusion_data"><p><I>The outer room, balmy with rich perfumes, should contain a bed, soft, agreeable to the sight; covered with a clean white cloth... having garlands and bunches of flowers upon it. </I><P>A well-appointed bedroom will inspire many nights (and mornings) of pleasure. Ideally, your bed should be comfortable and inviting, with enough space around it to make you feel at ease. You should be able to move energetically without producing annoying squeaks or thumps. Whether your taste runs to red velvet or white linen, strive to establish an aesthetic of pleasure, relaxation, and entertainment. Items you may want within easy reach include:<P>*Drinking water and tissues<P>*Mints or candied aniseed<P>*Lubricant and condoms<P>*Neck pillow (for under your hips)<P>*Love toys and ostrich feather<P>*Scented lotions and massage oil<P>*Incense, candles, and matches<P>Make sure your bedroom smells delicious and is softly lit, and don't forget suitable music. Consider placing a candle where it will cast your lovemaking shadows on the wall, or a mirror where you can catch a glimpse of yourselves. Add a bowl of delicious fruits, books of love poetry, even board games.<P><img src="multimedia/frontimage1.png" id="mobi_image_1694" class="inline-img"/></p></div></div></body></html>

93835.txt：“爱的触摸”中的“爱情讯息”

<html><head><title></title></head><body>
<div id="mobi_content"><h1>A Love Message</h1><div id="dataSectionInstanceId-182061" class="mobifusion_data"><p><I>When a girl touches her lover's lip with her tongue, and having shut her eyes, places her hands on those of her lover, it is called the</I><b> touching kiss.</b><P>Each day offers an opportunity to receive or deliver the <b>Touching Kiss,</b> the most tender and electrifying of the genre. You can proceed from there to the three basic kisses, <b>Straight</b>, <b>Bent</b>, and <b>Turned</b>.<P><b>Straight</b> is just as it sounds, with the two of you facing each other. <b>Bent</b> is done with heads tipped to the side, and <b>Turned</b> is done when one person takes the other's chin and head in hand and turns his or her face up for a kiss. If you engage in any of these kisses with urgency, it's called the <b>Pressed Kiss</b>.<P>An intense crush can drive a lover to distraction, leading to a kiss of the beloved's reflection in a mirror or water, or shadow on a wall. When that's done it's called a <b>Kiss Showing the Intention</b>, and only those dizzy with love do it. If they give a peck to a child, picture, or figurine in the presence of their sweetheart, making it obvious for whom the kiss was truly intended, it's called a <b>Transferred Kiss.</b> This is a sneaky way to send a love message in mixed company. At a movie or a party, you can show your love discreetly by kissing your fingertips and touching them to your darling's finger or toes.<P><img src="multimedia/frontimage2.png" id="mobi_image_1695" class="inline-img"/></p></div></div></body></html>

使用更新的Html文件和Js：http://jsfiddle.net/Hs38x/3/

查看此链接

先谢谢。

Answer 1

您需要根据content ID 查找section。检查示例和下面的代码。

<强> Demo

创建section的列表：

var xml = 'xml code here';

$(xml).find('section').each(function () {
 var section = $(this).attr("name");
 var order = $(this).attr("order");
 $("#section_list").append('<li><a href="#chapter" id="' + order + '">' + section + '  </a> </li>');
 $("#section_list").listview('refresh');
});

根据点击的列表项，获取id并根据id提取内容：

$("#section_list").on('click', 'a', function () {
 var order = $(this).attr('id'); // clicked item id/order
 $("#content_list").empty(); // wipe it before you add items
 $(xml).find('section[order="' + order + '"] content').each(function () {
  var content = $(this).text();
  var file = $(this).attr('file'); // added this and file="" inside <a> link below
  $("#content_list").append('<li><a href="#" file="' + file + '" id="">' + content + ' </a> </li> ');
 });
 $("#content_list").listview('refresh');
});

更新回答

参考您的评论和更新的问题，这是代码。但首先，您需要将file.txt添加到<a>链接，如下所示。

var file = $(this).attr('file');
$('#content_list').append('<li><a href="#" file="' + file + '">' + content + ' </a></li>');

使用file.txt个名称更新了相关链接后，以下代码会将.load() file.txt个内容放入新页面。

$(document).on('click', '#content_list li a', function () {
 var file = $(this).attr('file');
 if($('[data-role=page]#words').length === 0) {
  $($.mobile.pageContainer).append('<div data-role="page" id="words" data-add-back-btn="true"><div data-role="header"><h1>Words</h1></div><div data-role="content"></div></div>');
  $('[data-role=page]#words [data-role=content]').load('path/'+file);
  $.mobile.changePage('#words');
 }
 else {
  $('[data-role=page]#words [data-role=content]').empty();
  $('[data-role=page]#words [data-role=content]').load('path/'+file);
  $.mobile.changePage('#words');
 }
});

我已将页面#words更改为适合您的页面。

如果您有任何疑问，请与我联系。

如何使用jquery从xml中获取所选父项的子项？

1 个答案:

更新回答