Question

有人帮我吗？

我有两步的xml。例如：

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

在我的功能中，我使用“list.each”追加到ul + index。它工作正常。而我的问题是，当我附加“list.each”时，“子列表组”不应附加到“list.each”，并且“子列表组”需要输入“ul”并且在ul中我需要“子列表”变为儿童..

我的代码在这里......

我知道，我正在做一些错误的方式..请任何人纠正它并让我知道..

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

我假设您在遇到<ul>时尝试创建嵌套的sublistgroup列表。

如果是这样，试试这个：

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

应生成以下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

这是另一种将重用现有XML结构的解决方案。

它有点短。

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

        });
    });
});

它产生相同的结果，代码更少。

xml附加问题

2 个答案: