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