0

誰でも私を助けてくれますか？

私は2つのステップで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」を追加するときに、「sublistgroup」を「list.each」に追加してはならず、「sublistgroup」を「ul」にする必要があり、ul で「sublist」が必要になったことです。子供の..

私のコードはここにあります...

私はそれを知っています、私はいくつかの間違った方法をやっています..誰かがそれを修正して私に知らせてください..

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

            })

    })



    })    
})
4

2 に答える 2

0

<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>​
于 2010-05-30T11:37:38.997 に答える
0

既存の 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());  

        });
    });
});

少ないコードで同じ結果が得られます。

于 2010-05-30T15:15:16.857 に答える