動態XML流問題

Question

我的問題是，這個jQuery的：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $.get('CampusList.xml', function(xmltree){ 
      $('#settings').before('<ul id="campuses">'); 
      $(xmltree).find('campus').each(function(){ 
       $('#settings').before('<li class="campus">'+$(this).attr('name')+'<ul id="buildings">'); 
       $(this).find('building').each(function(){ 
        $('#settings').before('<li class="building">'+$(this).attr('name')+'</li>'); 
       }); 
       $('#settings').before('</ul>'); 
       $('#settings').before('</li>'); 
      }); 
      $('#sidebar').before('</ul>'); 
     }); 
    }); 
</script> 

這是相關的XML：

<campuses name='Campuses'> 
    <campus name='Clearwater'> 
    <building name='Clearwater Building 1' img='someimg.png' /> 
    <building name='Clearwater Building 2' img='someimg.png' /> 
    <building name='Clearwater Building 3' /> 
    </campus> 
    <campus name='Saint Petersburg'> 
    <building name='St. Pete Building 1' /> 
    <building name='St. Pete Cafe Building' /> 
    <building name='Other Building' /> 
    <building name='Secret Chiller Plant Connection' /> 
    </campus> 
    <campus name='Epicenter'> 
    <building name='District Offices' img='epi_do_floor1.png' /> 
    <building name='Services' img='epi_services.png' /> 
    <building name='Tech Building' img='epi_tech.png' /> 
    </campus> 
</campuses> 

最後，這是錯誤的輸出：（我從chrome的檢查器截圖，因爲否則它將全部出現亂碼。）

Answer 1

問題是你的邏輯試圖將DOM構建爲一個字符串，而當你使用jQuery時不會發生這種情況。

當你做以下幾點：

$('#settings').before('<ul id="campuses">'); 

jQuery的將其放入DOM正確，關閉標籤。這就是爲什麼你的頂部有一個空的<ul id="campuses"></ul>。

解決方案是將您的輸出構建爲樹，隨時保存父引用，並將嵌套元素附加到它們各自的容器中。

像這樣的東西應該工作：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $.get('CampusList.xml', function(xmltree){ 
      var $campuses = $('<ul id="campuses">').insertBefore('#settings'); 
      $(xmltree).find('campus').each(function(){ 
       var $campus = $('<li class="campus">'+$(this).attr('name')+'</li>').appendTo($campuses); 
       var $buildings = $('<ul id="buildings">').appendTo($campus); 
       $(this).find('building').each(function(){ 
        $buildings.append('<li class="building">'+$(this).attr('name')+'</li>'); 
       }); 
      }); 
     }); 
    }); 
</script> 

Answer 2

@DarthJDG，而你的答案沒有工作，我更喜歡的是我做的，還是利用追加修改後的版本簡單，但只是需要:last CSS的優勢選擇器的僞類。下面的代碼：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $.get('CampusList.xml', function(xmltree){ 
     $(xmltree).find('campus').each(function(){ 
      $('#campuses').append('<li class="campus">'+$(this).attr('name')+'<ul class="buildings">'); 
      $(this).find('building').each(function(){ 
       $('.buildings:last').append('<li class="building hidden" img="'+$(this).attr('img')+'">'+$(this).attr('name')+'</li>'); 
      }); 
     }); 
    }); 
}); 
</script> 

我會心疼我的標記答案是正確的，雖然，所以我將它送給你，但我覺得我的做法是可能有點更高效。