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 标记非常漂亮复杂的。我正在尝试为带有组标题的常见问题创建嵌套 Accordion ，就像这里一样: 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>

Answer 1

您必须基于 XML 迭代并构建一个对象，然后迭代该对象并构建标记。像这样的东西:

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