Javascript jQuery解析xml并按特定属性分组

我试图根据主题对问题进行分组，并生成一个如下所示的标记，但我无法理解，因为即使生成的xml很简单，但需要创建的html标记也相当复杂。我正在尝试为带有组标题的常见问题创建嵌套手风琴，如下所示：

有人能帮我用jQuery格式化标记吗

<rs:data ItemCount="6">
   <z:row ows_Question='How do email notifications work?'  
          ows_Topic='Email Notifications' ows_Answer='An alert email is sent out.'/>

   <z:row ows_Question='How secured are passwords?'  
          ows_Topic='Passwords' ows_Answer='Passwords are very secured'/>

   <z:row ows_Question='How do we create strong passwords?'  
          ows_Topic='Passwords' ows_Answer='Combine alphanumerics with symbols.' />

   <z:row ows_Question='What are disadvantages of phones?'  
          ows_Topic='Phones' ows_Answer='Probably very few, if none.'/>

   <z:row ows_Question='What models do you like?'  
          ows_Topic='Phones' ows_Answer='Smartphones, with touch interface.'/>

   <z:row ows_Question='How often do email notifications occur?' 
          ows_Topic='Email Notifications' ows_Answer='Five times a day.' />
</rs:data>

电子邮件通知


电子邮件通知是如何工作的？
发出一封提醒电子邮件



电子邮件通知多久发生一次？
一天五次





密码


密码的安全性如何？
密码非常安全



我们如何创建强密码？
将字母数字与符号相结合

您必须迭代并基于XML构建一个对象，然后迭代该对象并构建标记。比如：

<div id="main">
  <ul class="accordion" id="faq"> 
    <li>
      <h4>Email Notifications</h4>  <!--Topic -->
        <div class="inner">
            <ul>
              <li>
                 <h5>How do email notifications work?</h5>
                  <div class="inner shown">
                     <p>An alert email is sent out.</p>
                  </div>
               </li>
               <li>
                  <h5>How often do email notifications occur?</h5>
                  <div class="inner">
                    <p>Five times a day.</p>
                  </div>
                </li>
            </ul>
        </div>
    </li>

    <li>
      <h4>Passwords</h4>  <!--topic as group header -->
        <div class="inner">
            <ul>
              <li>
                 <h5>How secured are passwords?</h5>
                  <div class="inner shown">
                     <p>Passwords are very secured.</p>
                  </div>
               </li>
               <li>
                  <h5>How do we create strong passwords?</h5>
                  <div class="inner">
                    <p>Combine alphanumerics with symbols.</p>
                  </div>
                </li>
            </ul>
        </div>
    </li>

var o={}，
main=$（''，{id:'main'}），
ul=$（'
'，{id:'faq'，'class'：'accordion}）
$（xml）.find（'z\\\：行'）.each（函数（）{
var topic=$（this.attr（'ows\u topic'），
问题=$（this.attr（'ows_question'），
答案=$（this.attr（'ows_answer'）；
o[topic]=o[topic]==未定义？[]：o[topic]；
o[topic].push（{问题：问题，答案：答案}）；
});
$。每个（o，功能（tpc，ans）{
变量li=$（“
”），
h4=$（''，{text:tpc}），
内部=$（''，{'class'：'inner'}），
_ul=$（“
”）；
$。每个（ans，函数（i，a）{
var_li=$（'
'），
h5=$（''，{text:a.question}），
div=$（''，{'class'：（i==0？'，
p=$（'
'，{text:a.answer}）；
_ul.append（_li.append（h5，div.append（p）））；
});
ul.append（li.append（h4，inner.append（_-ul））；
});
main.append（ul.appendTo（'body'）；

---

哇，你做这件事的方式是如此干净和美丽！非常感谢你！谢谢！

var o    = {},
    main = $('<div />', {id: 'main'}),
    ul   = $('<ul />', {id: 'faq', 'class': 'accordion'})

$(xml).find('z\\:row').each(function() {
    var topic    = $(this).attr('ows_Topic'),
        question = $(this).attr('ows_Question'),
        answer   = $(this).attr('ows_Answer');

    o[topic] = o[topic] === undefined ? [] : o[topic];
    o[topic].push({question:question, answer:answer});
});

$.each(o, function(tpc, ans) {
    var li    = $('<li />'),
        h4    = $('<h4 />', {text: tpc}),
        inner = $('<div />', {'class': 'inner'}),
        _ul   = $('<ul />');

    $.each(ans, function(i,a) {
        var _li = $('<li />'),
            h5  = $('<h5 />', {text: a.question}),
            div = $('<div />', {'class': (i===0?'inner_shown':'')}),
            p   = $('<p />', {text: a.answer});

        _ul.append(_li.append(h5, div.append(p)));
    });
    ul.append(li.append(h4, inner.append(_ul)));
});

main.append(ul).appendTo('body');