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>

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

jQuery按特定属性解析xml和group

1 个答案: