проблема с добавлением XML

Question

Кто-нибудь мне поможет?

У меня есть XML с 2 шагами.пример:

<listgroup title="Lifestyle" shortnote="">

  <list>Type of Company: Architects may be self-employed.</list>
  <list>Workspace – Indoors/outdoors: Architects work both.</list>
  <list>Environment
   <sublistgroup>
    <sublist>Travel: Architects often visit construction sites to review the progress of projects.</sublist>
    <sublist>People: They work a lot with other professionals involved in the construction project including engineers, contractors, surveyors and landscape architects.</sublist>
    <sublist>Casual: They usually work in a casual and comfortable environment.</sublist>
    <sublist>Hours: The hours are varied based on the project they are working on.</sublist>
    <sublist>Physically demanding: They stand on their feet.</sublist>
    <sublist>Tools: Computers - Architects </sublist>
   </sublistgroup>
  </list>
  <list>Assist clients in obtaining construction bids</list>
  <list>Observe, inspect and monitor building work</list>

в моей функции я использую "list.each" для добавления к ul + index.это работает отлично.И моя проблема заключается в том, что пока я добавляю «list.each», «sublistgroup» не должна добавляться в «list.each», вместо «sublistgroup» нужно сделать «ul», а в ul мне нужно, чтобы «sublist» сталдети ..

мой код здесь ...

Я знаю, что я поступаю неправильно ... Пожалуйста, исправьте это и дайте мне знать ..

$(function(){
    $.get('career-utility.xml',function(myData){

    $(myData).find('listgroup').each(function(index){
          var count = index;
          var listGroup = $(this);
          var listGroupTitle = $(this).attr('title');
          var shortNote =   $(this).attr('shortnote');
          var subLink   = $(this).find('sublist');
          var firstList = $(this).find('list');

           $('.grouplist').append('<div class="list-group"><h3>'+listGroupTitle+'</h3><ul class="level-one level' + count + '"></ul></div>');

            firstList.each(function(listnum){
                var subList = $(this).text();

                var subListLeveltwo = $(this).find('sublist').text();

                if(subListLeveltwo==''){
                    $('<li>'+subList+'</li>').appendTo('ul.level'+count+'');
                }
                else{
                    $('<li class="new">'+subList+'</li>').appendTo('ul.level'+count+'');
                }

            })

    })



    })    
})

Answer 1

Вот еще одно решение, которое будет повторно использовать существующую структуру XML.

Это немного короче.

$.get('career-utility.xml',function(myData){

    $(myData).find('listgroup').each(function(index){

      var count = index;
      var listGroup = $(this);
      var listGroupTitle = $(this).attr('title');
      var shortNote =   $(this).attr('shortnote');
      var subLink   = $(this).find('sublist');
      var firstList = $(this).find('list');

       $('.grouplist').append('<div class="list-group"><h3>'+listGroupTitle+'</h3><ul class="level-one level' + count + '"></ul></div>');

        firstList.each(function(listnum) {
             // This simply wraps the content of existing XML nodes,
             //   then unwraps the old node
            $(this).wrapInner('<li>')
                   .find('sublistgroup').wrapInner('<ul>').children().unwrap()
                   .find('sublist').wrapInner('<li>').children().unwrap();

               // Append content of 'list' node
            $('ul.level'+count).append($(this).children());  

        });
    });
});

Это дает тот же результат, с меньшим количеством кода.

Answer 2

Я предполагаю, что вы пытаетесь создать вложенный список <ul>, когда сталкиваетесь с sublistgroup.

Если так, попробуйте это:

$.get('career-utility.xml',function(myData){

    $(myData).find('listgroup').each(function(index){

      var count = index;
      var listGroup = $(this);
      var listGroupTitle = $(this).attr('title');
      var shortNote =   $(this).attr('shortnote');
      var subLink   = $(this).find('sublist');
      var firstList = $(this).find('list');

       $('.grouplist').append('<div class="list-group"><h3>'+listGroupTitle+'</h3><ul class="level-one level' + count + '"></ul></div>');

            // Cache the current UL for performance
       var $currentUL = $('ul.level'+count);

        firstList.each(function(listnum) {

            var $subListGroup = $(this).find('sublistgroup').remove();

            var listHeading = $(this).text();

            $currentUL.append('<li>'+listHeading+'</li>');

            if($subListGroup.length){

                   // Cache the new UL for the sub group, and append to the currentUL
                var $subUL = $('<ul class="sublevel' + count + '"></ul>').appendTo( $currentUL );

                $subListGroup.children('sublist').each(function() {
                    $subUL.append('<li>' + $(this).text() + '</li>')
                });
            }
        });
    });
})

Должен выдать следующий HTML:

<div class="grouplist">
    <div class="list-group">
        <h3>Lifestyle</h3>
        <ul class="level-one level0">
            <li>Type of Company: Architects may be self-employed.</li>
            <li>Workspace &ndash; Indoors/outdoors: Architects work both.</li>
            <li>Environment</li>
            <ul class="sublevel0">
                <li>Travel: Architects often visit construction sites to review the progress of projects.</li>
                <li>People: They work a lot with other professionals involved in the construction project including engineers, contractors, surveyors and landscape architects.</li>
                <li>Casual: They usually work in a casual and comfortable environment.</li>
                <li>Hours: The hours are varied based on the project they are working on.</li>
                <li>Physically demanding: They stand on their feet.</li>
                <li>Tools: Computers - Architects </li>
            </ul>
            <li>Assist clients in obtaining construction bids</li>
            <li>Observe, inspect and monitor building work</li>
        </ul>
    </div>
</div>​