javascript - 使用 JQuery 解析 XML(需要逻辑帮助)

Question

我试图在解析 XML 文档时生成 HTML。问题是我有需要在解析之前分配的变量 - 谁能告诉我一个解决方法？

$.ajax({
    url: 'doc.xml',
    type:'get',
    dataType:'xml',
    async:'false',
    success:function(xmlReply){
        var out = '';
        var businfo = '';
        var businfoOne = '';
        var latFrom = '';
        var longFrom = '';
        var locationAt = '';
        var latTo = '';
        var longTo = '';
        $("#result").empty();

        out += '<ul id=\'resultslist\' data-role=\'listview\' data-theme=\'c\'>';
        $(xmlReply).find('itinerarie').each(function(){

            out += '<li data-role=\'list-divider\' data-theme=\'a\'>';
            locationAt = $(this).find('description').text();
            out += locationAt;
            out += '</li>';
            out += '<li><a href=\"#route_results_map\" onclick=\"plotMap(\''+businfo+'\','+latFrom+','+longFrom+','+latTo+','+longTo+')\">';  
            var count = 0;
            var transfer = $(this).find('route').length;
            $(this).find('route').each(function(){

                //display transfer
                if(count > 0){out+= '>>> Transfer To >>><br/>';}

                //display get on bus information
                if(count == 0){
                    businfo = $(this).find('bus').text();
                }
                out += $(this).find('bus').text();

                $(this).find('geton').each(function(){
                    //where to board the bus
                    if(count == 0){
                        latFrom = $(this).find('lat').text();
                        longFrom = $(this).find('long').text();
                    }
                    $(this).find('name').text();
                    out += '<br/>Leaves: '; 
                    out += $(this).find('time').text();
                })

                    //end geton
                    $(this).find('getoff').each(function(){
                        $(this).find('name').text();
                        out += ' <br/>Reaches: ';
                        out += $(this).find('time').text();
                        out += '<br/>';
                        latTo = $(this).find('lat').text();
                        longTo = $(this).find('long').text();
                    })
                        count++;
            })
                out += '</a></li>';
        })
            //out += '</ul>';
            $("#result").append($(out));
        $("#result").append('<ul>');
        $('#resultslist').listview();
    }//success
});//ajax

Answer 1

在上面的代码中，我看不出有什么理由不能在解析 XML 之后延迟构建最终输出。我稍微改变了你的代码，我添加了一个新的临时变量 parse_out ，您可以在解析时为该项目构建 HTML 内容，然后在解析所有内容后，添加 <li>最终输出(现在已设置变量)和 parse_out 中的 HTML 内容临时变量。

$.ajax({
    url: 'doc.xml',
    type:'get',
    dataType:'xml',
    async:'false',
    success:function(xmlReply){
        var out = '';
        var businfo = '';
        var businfoOne = '';
        var latFrom = '';
        var longFrom = '';
        var locationAt = '';
        var latTo = '';
        var longTo = '';
        $("#result").empty();

        out += '<ul id=\'resultslist\' data-role=\'listview\' data-theme=\'c\'>';
        $(xmlReply).find('itinerarie').each(function(){

            locationAt = $(this).find('description').text();
            var count = 0;
            var transfer = $(this).find('route').length;
            var parse_out = "";
            $(this).find('route').each(function(){

                //display transfer
                if(count > 0){parse_out+= '>>> Transfer To >>><br/>';}

                //display get on bus information
                if(count == 0){
                    businfo = $(this).find('bus').text();
                }
                parse_out += $(this).find('bus').text();

                $(this).find('geton').each(function(){
                    //where to board the bus
                    if(count == 0){
                        latFrom = $(this).find('lat').text();
                        longFrom = $(this).find('long').text();
                    }
                    $(this).find('name').text();
                    parse_out += '<br/>Leaves: '; 
                    parse_out += $(this).find('time').text();
                });

                    //end geton
                    $(this).find('getoff').each(function(){
                        $(this).find('name').text();
                        parse_out += ' <br/>Reaches: ';
                        parse_out += $(this).find('time').text();
                        parse_out += '<br/>';
                        latTo = $(this).find('lat').text();
                        longTo = $(this).find('long').text();
                    });
                        count++;
            });
            out += '<li data-role=\'list-divider\' data-theme=\'a\'>';
            out += locationAt;
            out += '</li>';
            out += '<li><a href=\"#route_results_map\" onclick=\"plotMap(\''+businfo+'\','+latFrom+','+longFrom+','+latTo+','+longTo+')\">';  
            out += parse_out;
            out += '</a></li>';
        });
        out += '</ul>';
        $("#result").append($(out));
        $('#resultslist').listview();
    }//success
});//ajax

我也不明白你为什么注释掉关闭你的 <ul>在处理结束时以及为什么要附加一个空 <ul>在你的输出之后，我也将其更改为我认为可能是你想要的。