Question

Any one help me?

i have the xml with 2 steps. example :

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

in my funcation i am using “list.each” to append to ul+index. it works fine. And my problem is while i append the “list.each”, the “sublistgroup” should not append to “list.each”, insted the “sublistgroup” need to make “ul” and in the ul i need the “sublist” became childrens..

my code is here…

i konw that, i am doing some wrong way.. pls any one correct it and let me know..

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

Here’s another solution that will re-use the existing XML structure.

It’s a bit shorter.

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

        });
    });
});

It produces the same result, with less code.