user1716672
user1716672

Reputation: 1073

Cannot find encoded node in xml through Jquery

I'm parsing a Wordpress blog xml feed with Backbone.js and Jquery. An xml item looks like this:

<item>
    <title>The Title</title>

    <link>
    http://domain.ie/blog/2013/11/18/fashion-show/
    </link>

    <comments>
    http://domain.ie/blog/2013/11/18/fashion-show/#comments
    </comments>

    <pubDate>Mon, 18 Nov 2013 20:28:02 +0000</pubDate>

    <description>
    <![CDATA[
    some description
    ]]>
    </description>

    <content:encoded>
    <![CDATA[
    the content
    ]]>
    </content:encoded>

</item>

In the model I have:

    $(xml).find('item').each(function (index) {

    console.log('item children are ');
    console.log($(this).children());

    content = $(this).find('content\\:encoded').text();

    console.log('content.length is ');
    console.log(content.length);

    title = $(this).find('title').text();

    description = $(this).find('description').text();

    console.log('descriptions is ');
    console.log(description);   

    pubDate = $(this).find('pubDate').text();                  

    parsed.push({id:id, title: title, 
                    description:description, content:content, pubDate:pubDate});
    id++;
    });

    return parsed;
},

However, "content:encoded" is never found. When I look out output from the console, I can see "content:encoded" listed as a child. Why can't jquery find it?

EDIT: The answers below regarding escaping the colon stil are not solving my problem. I have set up a demo on my server (Jsfiddle wont work here because there will be a cross domain issue). The link is here. The rss feed is here. As will see, content:encoded is never found, despite escaping the colon. If you look at output of the console, you'll see description is found but content length is not and always have a length of 0. What can it be?

Upvotes: 0

Views: 179

Answers (3)

user1716672
user1716672

Reputation: 1073

It seems that on webkit browsers, in order to find a tag containing a colon, you need to use what's after the colon as a selector:

content = $(this).find('encoded').text();

Escaping the colon works on Firefox:

content = $(this).find('content\\:encoded').text();

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try this you just missed to escape the meta character which actually being a tag name in your case,

content = $(this).find('content\\:encoded').text();

DEMO

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors.

Reference : selectors

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388406

You need to escape : with \:

content = $(this).find('content\\:encoded').text();

Upvotes: 1

Related Questions