Parsing XML with JQuery (Need help with the logic)

I am trying to generate HTML while parsing an XML document. The problem is that I have variables which needs to be assigned prior to being parsed - could anyone show me a workaround for this?

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

In your code above, I don't see a reason why you can't delay building your final output after you parsed you XML. I changed your code a bit, I added a new temporary variable parse_out, in which you can build your HTML content for the item while you're parsing, then after everything was parsed, that's when you add your <li> to the final output (with the variables now set) and your HTML content from the parse_out temporary variable.

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

I also didn't understand why you commented out closing your <ul> at the end of your processing and why you are appending an empty <ul> after your output, I changed that bit too to what I think might be what you wanted.