jquery - 如何使用 jquery 在列表视图中显示父级的子级？

Question

我正在尝试使用 jquery 在列表视图中动态显示 xml 文件的父级的子级标签。

$(xml).find('section[order="' + order + '"] content').each(function () {
     var content = $(this).text();
var section = $(this).find('section').attr("name");
 $("#section_list").append(section+'<li><a href="#" class="style1"><h2>' + content + ' </h2></a></li> ');
$("#section_list").listview("refresh");
});

这是我的代码，我在列表视图中获取子标签，但父标签正在为每个孩子获取。

XML 文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <sections>
    <section count="6" name="Alphabets" order="1">
      <content order="1">A</content>
      <content order="2">B</content>
      <content order="3">C</content>
      <content order="4">D</content>
      <content order="5">E</content>
      <content order="6">F</content>
    </section>
    <section count="4" name="Numbers" order="2">
      <content order="7">1</content>
      <content order="8">2</content>
      <content order="9">3</content>
      <content order="10">4</content>
    </section>
</sections>

愿望输出是

字母表

一个

乙

C

D

乙

F

数字

1

2

3

4

“ABCDEF”和“1234”应该显示在列表视图中，父标签应该显示如上。

提前致谢。

Answer 1

    for (var order = 1; order < 3; order++) {
        $('xml').find('section[order="' + order + '"]').each(function () {
            //iterate by section
            var sectionName = $(this).attr("name");
            //Add Section Name to the list
            $("#section_list").append(sectionName);
            $(this).children().each(function () {
                //iterate by section/content
                //for each content tag under section add a li element
                $("#section_list").append('<li><a href="#" class="style1"><h2>' + $(this).text() + ' </h2></a></li> ');
            });
            //$("#section_list").listview("refresh");
        });
    }

试试这个小提琴