xml附加问题

Question

任何人都可以帮我吗？

我有2个步骤的XML。例如：

<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 +索引。它工作正常。而我的问题是，当我追加“list.each”，“sublistgroup”不应该追加到“list.each”，insted“sublistgroup”需要使“ul”，并在ul我需要“子列表”成为儿童..

我的代码是在这里...

我konw说，我做了一些错误的方式..请任何一个纠正它，让我知道..

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

我承担当您遇到sublistgroup时，您正尝试创建一个嵌套的<ul>列表。

如果是的话，试试这个：

$.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>​