How can I handle XML namespaces in CSS Selectors or in jQuery?

Question

I use jQuery to parse an RSS feed. I can successfully get the RSS feed using AJAX:

$.get("podcast.xml", function (data) {
    xml = $(data);
}, "xml");

Now I can get the title of the podcast by using xml.find("channel > title").text(). How can I select the <itunes:image> tag in my RSS feed?

The command xml.find("channel > itunes:image") does not work, because : separates in CSS the tag name and the pseudo class. I also tried xml.find("channel > image") but it does not work.

How can I handle XML namespaces in CSS Selectors or in jQuery?

Answer 1

CSS allows you to specify namespaces for use with selectors within stylesheets.

However, jQuery doesn't support this since you have no way of declaring the XML namespace in the first place (as jQuery has nothing to do with CSS besides borrowing from its selector syntax), so you have to treat the colon as a literal character instead by escaping it like so:

xml.find("channel > itunes\\:image")

Answer 2

I want to add something wired I just explored: If I try the above code on my rekonq browser (which uses webkit), I cannot find the <itunes:image> tag by searching for xml.find("channel > itunes\\:image").

I have to omit the term itunes: and have to type xml.find("channel > image"). So we have:

xml.find("channel > itunes\\:image") /* Firefox */

xml.find("channel > image") /* Rekonq (maybe also Safari and Chrome?!) */