jquery - 如何使用 jquery 在 xmll 文件的父级下显示子级？

Question

我想在列表视图中显示子标签。在该列表视图中，我将父标签添加为列表分隔符。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<page count="89" name="Sample">
  <sections>
    <section count="3" name="Alphabets" order="1">
      <content file="220993.txt" order="1">A</content>
      <content file="220994.txt" order="2">B</content>
      <content file="220995.txt" order="3">C</content>
    </section>
    <section count="5" name="Numbers" order="2">
      <content file="221006.txt" order="4">five</content>
      <content file="221007.txt" order="5">four</content>
      <content file="221008.txt" order="6">three</content>
      <content file="221009.txt" order="7">two</content>
      <content file="221010.txt" order="8">one</content>
    </section>
    <section count="2" name="Names" order="3">
      <content file="221013.txt" order="9">Sam</content>
      <content file="221014.txt" order="10">Sansha</content>
    </section>
  </sections>
</page>

代码：

$(xml).find('section').each(function () {
                var section = $(this).attr("name");
                var count = $(this).attr('count');
                var order = $(this).attr('order');
                $(this).children().each(function () {
                    var content = $(this).text();

                    var order = $(this).attr("order");
                    var seq = order + '' + $(this).attr('order');

                        $("#section_list").append('<li data-role="list-divider">' + section + '</li>');
                        $("#section_list").append('<li><a href="" class="style1" data-sequence="s' + seq + '" ><h2>' + content + ' </h2></a></li>');    
                        $("#section_list").listview('refresh');

                });
            });

如果我这样做，这个父标签会为每个孩子重复。

与列表分隔符一起。我正在显示列表视图中每个项目的描述。但这些描述来自每个项目的相关文件。当我显示带有列表分隔符的列表视图以及描述时，我遇到了问题，然后列表视图显示为所有分隔符应首先组合，然后在显示带有描述的列表项下方。如何正确显示带有描述的列表视图。

http://jsfiddle.net/2YbT5/

提前致谢。

Answer 1

演示

试试这个代码..

$(xml).find('section').each(function () {
  var section = $(this).attr("name");
  var count = $(this).attr('count');
  var order = $(this).attr('order');
  $("#section_list").append('<li data-role="list-divider">' + section + '</li>');
  $(this).find('content ').each(function () {
     var content = $(this).text();
     var order = $(this).attr("order");
     var seq = order + '' + $(this).attr('order');
     $("#section_list").append('<li><a href="" class="style1" data-sequence="s' + seq + '"  ><h2>' + content + ' </h2></a></li>');    
     });
});