代码之家 › 专栏 › 技术社区 › Andrea Turri

带XML的jQuery菜单

xml html jquery

Andrea Turri · 技术社区 · 14 年前

老实说,我还没有在jQuery中使用XML。

我有一点XML(如下所示):

<folder title="Home">
  <item title="Welcome" />
  <folder title="My Photos">
    <folder title="Holidy">
      <item title="Photo 1" />
      <item title="Photo 2" />
      <item title="Photo 3" />
      <item title="Photo 4" />
      <item title="Photo 5" />
    </folder>
    <folder title="Christmas">
      <item title="Photo 1" />
      <item title="Photo 2" />
      <item title="Photo 3" />
      <item title="Photo 4" />
      <item title="Photo 5" />
      <item title="Photo 6" />
      <item title="Photo 7" />
      <item title="Photo 8" />
    </folder>
    <folder title="Zoo">
      <item title="Photo 1" />
      <item title="Photo 2" />
      <item title="Photo 3" />
      <item title="Photo 4" />
    </folder>
  </folder>
  <folder title="My Videos">
    <item title="Movie 1" />
    <item title="Movie 2" />
    <item title="Movie 3" />
    <item title="Movie 4" />
    <item title="Movie 5" />
    <item title="Movie 6" />
    <item title="Movie 7" />
    <item title="Movie 8" />
  </folder>
  <folder title="My Audio">
    <folder title="Artist 1">
      <folder title="Album 1">
        <item title="Track 1" />
        <item title="Track 2" />
        <item title="Track 3" />
        <item title="Track 4" />
        <item title="Track 5" />
        <item title="Track 6" />
        <item title="Track 7" />
      </folder>
      <folder title="Album 2">
        <item title="Track 1" />
        <item title="Track 2" />
        <item title="Track 3" />
        <item title="Track 4" />
        <item title="Track 5" />
        <item title="Track 6" />
        <item title="Track 7" />
        <item title="Track 8" />
      </folder>
    </folder>
    <folder title="Artist 2">
      <folder title="Album 1">
        <item title="Track 1" />
        <item title="Track 2" />
        <item title="Track 3" />
        <item title="Track 4" />
        <item title="Track 5" />
        <item title="Track 6" />
        <item title="Track 7" />
      </folder>
    </folder>
    <folder title="Podcasts">
      <item title="Track 1" />
      <item title="Track 2" />
      <item title="Track 3" />
      <item title="Track 4" />
      <item title="Track 5" />
      <item title="Track 6" />
      <item title="Track 7" />
      <item title="Track 8" />
    </folder>
  </folder>
</folder>

我想按以下顺序填充html:

<div class="entry">
   <p><span class="links">Sub-directory</span></p>
   <p><span class="files">File One</span></p>
   <p><span class="files">File Two</span></p>
   <p><span class="files">File Three</span></p>
   <p><spanclass="files">FileFour</span></p>
   <p><spanclass="files">FileFive</span></p>
   <p><span class="files">File Six</span></p>
</div>

我想在里面导航。。。我知道如何加载XML,但不知道如何将标题文本放入span标记中。当naveigate变成“我的照片”。。。如何查看子内容。。。

提前谢谢你的帮助。

编辑:

下面是jQuery:

$.ajax({
        type: "GET",
        url: "content.xml",
        dataType: "xml",
        success: function (xml) {
            $(xml).find('Home').children().each(function () {

                var title_text = $(this).attr('title');
                var spanFiles = $('span.files');

                spanFiles
                    .html(title_text)
                    .appendTo('div.entry');

            });
        }
    });

但不起作用。。。

1 回复 | 直到 14 年前

tbleckert 14 年前

只需使用xml作为带有load函数的数据类型,我认为这是您走过的路。然后你必须循环你的顶部文件夹。但首先,xml应该如下所示:

<folders>
    <folder>
        <subfolder>
            <item></item>
        </subfolder>
    </folder>
</folders>

你为什么用头衔?您应该使用:文本

然后使用每个循环文件夹:

$(xml).find('folder').each(function() {
});

在那里你可以检查是否有一个子文件夹:

if($(this).find('subfolder').length > 0) { //loop the items from the subfolder }

要从项目中获取文本,只需:

$(this).find('item').text();

从这个开始,如果你失败了,你会没事的,回到这里。记住说什么不起作用而不是不起作用。。。

编辑:在你的代码中,你一次又一次地替换那个跨度的内容。 EDIT2:这是您应该附加项目的方式:

var text = $(this).find('item').text(),
    $span = $(document.createElement('span')).addClass('files');

$span.html(text).appendTo('div.entry');