jquery добавить выпуск

Question

У меня проблема с добавлением этого кода. В моем XML я иду 2 нет. "ListGroup" и JQuery печати Propelry. но в начале «listgroup» первая группа содержит 6 баллов, а вторая группа содержит 6 баллов. эти 2 раздела должны печататься отдельно для элемента 'ul'.

Но моя проблема в первый раз, когда он печатает сам обе 12 точки в первой ул., Которую я получаю, и он печатает 6 пинт во вторую ул пропелери ..

что я хочу, так это то, что первый ul должен иметь 6 баллов, а второй - 6 баллов, что он имеет в дереве xml ...

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

См. Правки ниже, но, возможно, вы пытались изменить атрибут class каждого ul.level. Если это так, вам нужно сделать следующее:

-> прокрутите вправо, чтобы увидеть, что класс обновляется с помощью номера индекса ->

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

Тогда это:

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

Я думаю, что первый метод, который я использовал, вероятно, лучше, если только вы не собираетесь использовать эти классы в качестве идентификаторов.

---

Оригинал:

Вы добавляете .children() к каждому экземпляру ul.level, поэтому во второй раз первый созданный вами объект снова получает детей.

Вам нужно сослаться на каждого вновь созданного <ul> и просто добавить к нему.

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

    })    
})

---

РЕДАКТИРОВАТЬ: проблема объяснена более подробно.

Первый проход

Вы добавляете новый контейнер в документ.

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

Затем вы добавляете детей:

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

Затем вы добавляете дочерние элементы, но обратите внимание, что ваш селектор ul.level, поэтому вы добавляете к обоим экземплярам 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>