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>

最後に、これは誤った出力です: (クロムのインスペクターからの画像をスクリーンショットしました。そうしないと、すべて文字化けしてしまうからです)。

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、あなたの答えはうまくいきますが、私が作成した修正版の単純さは、まだ追加を利用していますが: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>

私の答えを正しいものとしてマークするのは気分が悪いので、それを差し上げますが、私のアプローチはおそらくもう少し効率的だと思います。

于 2011-07-07T17:50:40.787 に答える