jquery Append Issue

Question

I am getting the append issue with this code. In my xml i go 2 no. of "listgroup" and jquery print propelry. but within the earch "listgroup", first group contain 6 points and second group contain 6 point. these 2 section has to print separately to 'ul' element.

But my problem is first time while it print itself both 12points in first ul i am getting and it print 6 pint to second ul propelry..

what i want is, first ul has to have 6 points and second has6 point what it has in the xml tree...

$(function(){
    $.get('career-utility.xml',function(myData){

    $(myData).find('listgroup').each(function(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">'+index+'</ul></div>');

         $(this).children().each(function(num){
            var text = $(this).text();
            $('<li>'+text+'</li>').appendTo('ul.level');
        })
    })

    })    
})

Answer 1

EDIT:

See the edits below, but perhaps you were trying to change the class attribute of each ul.level. If that's the case, you need to do this:

--> scroll to the right to see the class being updated with the index number -->

$('.grouplist').append('<div class="list-group"><h3>'+listGroupTitle+'</h3><ul class="level' + index + '"></ul></div>');

Then this:

$('<li>'+text+'</li>').appendTo('ul.level' + index);

I think the first method I used is probably a better one, unless you are going to use these classes as identifiers.

---

Original:

You are appending the .children() to each instance of ul.level, so the second time around, the first one you created is receiving the children again.

You need to reference each newly created <ul> and just append to that.

$(function(){
    $.get('career-utility.xml',function(myData){

    $(myData).find('listgroup').each(function(index){
          var listGroup = $(this);
          var listGroupTitle = $(this).attr('title');
          var shortNote =   $(this).attr('shortnote');
          var subLink   = $(this).find('sublist');
          var firstList = $(this).find('list');

          var $newElement = $('<div class="list-group"><h3>'+listGroupTitle+'</h3><ul class="level">'+index+'</ul></div>');
          var $newUL = $newElement.find('ul.level');

         $(this).children().each(function(num){
            var text = $(this).text();
            $newUL.append('<li>'+text+'</li>');
        });

        $('.grouplist').append( $newElement );
    })

    })    
})

---

EDIT: The issue explained in more detail.

First pass

You append the new container to the document.

<div class="list-group">
    <h3>first title</h3>
    <ul class="level">0</ul>
</div>

Then you append the children:

<div class="list-group">
    <h3>first title</h3>
    <ul class="level">0
        <li>first pass - first child</li>
        <li>first pass - second child</li>
        <li>first pass - third child</li>
        <li>first pass - fourth child</li>
        <li>first pass - fifth child</li>
        <li>first pass - sixth child</li>
    </ul>
</div>

Second pass

You append the new container to the document.

<div class="list-group">
    <h3>first title</h3>
    <ul class="level">0
        <li>first pass - first child</li>
        <li>first pass - second child</li>
        <li>first pass - third child</li>
        <li>first pass - fourth child</li>
        <li>first pass - fifth child</li>
        <li>first pass - sixth child</li>
    </ul>
</div>
<div class="list-group">  // New Container here
    <h3>second title</h3>
    <ul class="level">1</ul>
</div>

Then you append the children, but note that your selector is ul.level, so you are appending to both instances of ul.level:

<div class="list-group">
    <h3>first title</h3>
    <ul class="level">0
        <li>first pass - first child</li>
        <li>first pass - second child</li>
        <li>first pass - third child</li>
        <li>first pass - fourth child</li>
        <li>first pass - fifth child</li>
        <li>first pass - sixth child</li>
        <li> second pass - first child</li>
        <li> second pass - second child</li>
        <li> second pass - third child</li>
        <li> second pass - fourth child</li>
        <li> second pass - fifth child</li>
        <li> second pass - sixth child</li>
    </ul>
</div>
<div class="list-group">
    <h3>second title</h3>
    <ul class="level">1
        <li> second pass - first child</li>
        <li> second pass - second child</li>
        <li> second pass - third child</li>
        <li> second pass - fourth child</li>
        <li> second pass - fifth child</li>
        <li> second pass - sixth child</li>
    </ul>
</div>