javascript - jQueryはxmlを解析し、特定の属性でグループ化します

Question

<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 は単純ですが、作成する必要がある必要な html マークアップはかなり複雑であるため、理解できません。ここのように、グループヘッダーを使用してよく寄せられる質問のためにネストされたアコーディオンを作成しようとしています: http://www.adipalaz.com/experiments/jquery/nested_accordion_demo3.html

jQueryを使用してマークアップをフォーマットするのを手伝ってくれる人はいますか?

<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>