JQuery, XML, and a period in the tag name

Question

I subscribe to a third party web service that returns a lot of records and the tag names have a period in them.

Example:

<row rownumber="1">
    <a.FirstName>John</a.FirstName>
    <a.LastName>Smith</a.LastName>
</row>
<row rownumber="2">
    <a.FirstName>Jane</a.FirstName>
    <a.LastName>Doe</a.LastName>
</row>

I'm using JQuery to go through the records and that works just fine.

I can get the current row number from the element and it loops through all 2,000 records.

However, what I can't do is get the value inside the tag.

$(xml).find('row').each(
    function(){
        alert( $(this).attr('rownumber') );  //WORKS GREAT! 
        //but
        alert( $(this).find('a.FirstName').text() ); //does not work 
    }
);

Any ideas?

Thanks, D

Answer 1

The problem is that the selector you use a.FirstName will be interpreted as an achor-tag with the class FirstName. If you have special characters in the tag-name (like your dot), you will have to escape the . with two backslashes in the selector.

The jQuery documentation on selectors state the following:

If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \. For example, if you have an element with id="foo.bar", you can use the selector $("#foo\.bar").

Try this instead:

$(xml).find('row').each(
    function(){
        alert( $(this).find('a\\.FirstName').text() );
    }
);