jQuery анализирует xml и группирует по определенному атрибуту

Question

jQuery анализирует xml и группирует по определенному атрибуту

0

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

Athapali 23 сен. 2013, в 17:39

Источник

Теги:

javascript

jquery

html

xml

css

1 ответ

Ещё вопросы

adeneo · Accepted Answer · 2013-09-23T13-47-00.000Z

Вы должны выполнить итерацию и построить объект на основе 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

Вау, как ты это сделал, это так чисто и просто красиво! Большое спасибо! Оценил!