21

I'm trying to get the contents of a XML document element, but the element has a colon in it's name.

This line works for every element but the ones with a colon in the name:

$(this).find("geo:lat").text();

I assume that the colon needs escaping. How do I fix this?

Ilya Palkin
  • 14,687
  • 2
  • 23
  • 36
titanous
  • 3,668
  • 3
  • 27
  • 26

3 Answers3

32

Use a backslash, which itself should be escaped so JavaScript doesn't eat it:

$(this).find("geo\\:lat").text();
Adam Bellaire
  • 108,003
  • 19
  • 148
  • 163
  • 5
    @Vaske, I was seeing the same thing in Chrome using one of the latest versions of jQuery. Using the second half of node name after the colon worked for me. Used `.find("lat")` instead of `.find("geo\\:lat")` and it worked for me. – Mike Grace Jan 19 '12 at 22:50
  • @Mike yes that helps but I had namespace problem, general problem with my returning XML that it contains and <mine:title> and chrome in that case pull it together :(</mine:title> – vaske Jan 19 '12 at 23:21
  • It isn't working for me in FF but I found this answer: http://stackoverflow.com/questions/853740/jquery-xml-parsing-with-namespaces – Macario Mar 22 '12 at 08:46
  • `.find` just like `getElementsByTagName` doesn't behave the same across browsers (in particular Chrome and Firefox). If you're interesting in the direct children, use `.children`, which does work across browsers. More on: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Get-elements-with-prefixes – avernet Dec 03 '13 at 02:18
  • 1
    I referenced @MikeGrace's comment in the answer to the related question: http://stackoverflow.com/a/30040350/775359 – Mars Robertson May 04 '15 at 21:32
11

That isn't just an ordinary element name. That's a qualified name, meaning that it is a name that specifically refers to an element type within a namespace. The element type name is 'lat', and the namespace prefix is 'geo'.

Right now, jQuery can't deal with namespaces very well, see bug 155 for details.

Right now, as a workaround, you should be able to select these elements with just the local name:

$(this).find("lat").text();

If you have to distinguish between element types with the same local name, then you can use filter():

var NS = "http://example.com/whatever-the-namespace-is-for-geo";
$(this).find("lat").filter(function() { return this.namespaceURI == NS; }).text();

Edit: my mistake, I was under the impression that patch had already landed. Use Adam's suggestion for the selector, and filter() if you need the namespacing too:

var NS = "http://example.com/whatever-the-namespace-is-for-geo";
$(this).find("geo\\:lat").filter(function() { return this.namespaceURI == NS; }).text();
Jim
  • 72,985
  • 14
  • 101
  • 108
4

if you have a jquery selector problem with chrome or webkit not selecting it try

$(this).find('[nodeName=geo:lat]').text();

this way it works in all browsers

simon
  • 49
  • 2
  • 4
    It's worth noting that as of jQuery 1.7 there were issues with some of the work-arounds for finding namespaced elements. See these links for more information: http://bugs.jquery.com/ticket/10377 http://www.steveworkman.com/html5-2/javascript/2011/improving-javascript-xml-node-finding-performance-by-2000/ – ArnisAndy Mar 26 '12 at 21:24
  • 2
    Definitely recommend checking out the 2nd link ArnisAndy provided in his comment above. It beats all of the other solutions. – Valjas Apr 08 '13 at 21:07
  • The link to steveworkman really helped. This works in Chrome and FF for me: `$(xData.responseXML).find("z\\:row, row").each(function() { // Do stuff });` – kosemuckel Dec 10 '15 at 07:23