xml adjending issue

Question

Quelqu'un m'aider?

J'ai le xml avec 2 étapes. Exemple:

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

Dans ma fonction j'utilise «list.each» pour ajouter à ul + index. ça fonctionne bien. Et mon problème est pendant que j'ajoute le "list.each", le "sous-groupe" ne doit pas ajouter à "list.each", insted le "sous-groupe" besoin de faire "ul" et dans le ul j'ai besoin de la "sous-liste" enfants ..

mon code est ici ...

i konw que je fais une mauvaise façon .. pls une corriger et laissez-moi savoir ..

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

Voici une autre solution qui réutilisera la structure XML existant.

C'est un peu plus court.

$.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()); 

     }); 
    }); 
}); 

Il produit le même résultat, avec moins de code.

Answer 2

Je suppose vous essayez de créer une liste imbriquée <ul> lorsque vous rencontrez un sublistgroup.

Si oui, essayez ceci:

$.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>') 
       }); 
      } 
     }); 
    }); 
}) 

devrait produire le code HTML suivant:

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