Simple XML parsing with Google Picasa API and JQuery

I'm starting to l开发者_开发技巧ook into Google's Picasa API for photo data, which provides you with a big XML file with info about albums and photos.

I'm doing some quick and dirty tests to parse the XML file (which is saved locally to my hard drive for now) with JQuery and pull out the album id's, which are stored as "gphoto:id" tags, and display them in a div:

$(document).ready(function() {
$.get(
    'albums.xml',
    function(data) 
    {
        $(data).find('entry').each(function() 
        {
            var albumId = $(this).children('gphoto:id').text();
            $('#photos').append(albumId + '<br />');
        })
    })
})

I'm getting the following error in the console:

jquery.js:3321 - Uncaught Syntax error, unrecognized expression: Syntax error, unrecognized expression: id

This will work with other tags in the XML file (such as title, author, updated, etc.), but I'm trying to understand what's going on here. Does it have to do with the colon in "gphoto:id", somehow?

You can see what an XML file from a Picasa album looks like here: http://code.google.com/apis/picasaweb/docs/2.0/developers_guide_protocol.html#ListAlbumPhotos

The trouble is that jQuery parses something starting with a colon as a filter (like :first, :last, :visible, etc.). It parses your selector gphoto:id as "a gphoto element using the id filter". You need to escape the colon to indicate that it's all part of the tag name:

var albumId = $(this).children('gphoto\\:id').text();

You need the double backslash so that the internal representation of the string, as received by jQuery, has the backslash present.

This answer solved the problem. I got it to work by replacing this:

var albumId = $(this).children('gphoto:id').text();

with this:

var albumId = $(this).find('[nodeName=gphoto:id]').text();

You need tpo escape the colon with backslash e.g.

'gphoto\\\:id'

See the jQuery FAQ.