jQuery parse xml and group by certain attribute

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>

I am trying to group questions based on the topic and generate a markup like the following but i am unable to wrap my head around it because even though the resulting xml is simple, the required html markup that need to be created is pretty complex. I am trying to create nested accordion for a frequently asked questions with group header just like here: http://www.adipalaz.com/experiments/jquery/nested_accordion_demo3.html

Can anyone please help me format the markup using 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>

Answer 1

You have to iterate and build an object based on the XML, and then iterate over that object and build the markup. Something like :

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');

FIDDLE