xml appending issue

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

I assume you're trying to create a nested <ul> list when you come across a sublistgroup.

If so, try this:

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

Should produce the following 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>​

Answer 2

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.