1

我遇到的问题是这个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 的检查器中截取了图像，否则会出现乱码。）

HTML 输出

4

2 回答 2

2

问题是您的逻辑试图将 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>
于 2011-07-07T16:37:10.280 回答
0

@DarthJDG，虽然您的答案确实有效，但我更喜欢我制作的修改版本的简单性，它仍然使用追加，但只是利用:lastcss 伪类作为选择器。这是代码：

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

不过，将我的答案标记为正确的答案我会感觉不好，所以我会把它给你，但我认为我的方法可能更有效一些。

于 2011-07-07T17:50:40.787 回答