Strange jQuery XML problem

Question

I have a list of quotes in an XML document. Each quote is wrapped like this:

<Item>
    <Quote>This is a quote!</Quote>
    <Source>-- this is the Source of the Quote!</Source>
</Item>

Here's the jQuery:

    var html = '';
    var tmpl = '<li class=""><p class="quote">__quote</p><p class="source">__source</p></li>';

    $(quoteObj).find('Item').each(function(){ 

        $that = $(this);

        var _quote = $that.children('Quote').text();
        var _source = $that.children('Source').text();

        var qhtml = tmpl.replace('__quote', _quote).replace('__source', _source);

        html += qhtml;

    });

   return html;

In the end product, the QUOTES are all there, but the SOURCES aren't. I can't for the life of me figure out why. What's right in front of me that I can't see?

ADDITIONAL INFORMATION TO ANSWER COMMENTS:

1. The XML is properly formed, and I changed it above.
2. I added the var tmpl line to show what I'm replacing in the loop. The __quote is being replaced, and the __source is at least being acted upon, since the second <p> is empty, instead of containing a string.
3. I have checked the actual XML coming back from the AJAX call, and it is all there, as it should be.

It seems to me this is some sort of issue with scoping and this, or with the action of the .children() method, but I still can't find it.

ONE LAST NOTE:

Changed the XML tag case to Initial Caps, which it is in the document in question.

Answer 1

jQuery doesn't parse XML. Passing an XML string to $() simply assigns the string as the innerHTML property of an element, which has variable and unpredictable results. You need to parse the XML yourself, using the browser's built-in XML parser, and then pass the resulting document into jQuery:

var parseXml;

if (window.DOMParser) {
    parseXml = function(xmlStr) {
       return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
    };
} else if (typeof window.ActiveXObject != "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) {
    parseXml = function(xmlStr) {
        var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(xmlStr);
        return xmlDoc;
    };
} else {
    parseXml = function() { return null; }
}


var xmlStr = "<Item><Quote>This is a quote!</Quote><Source>-- this is the Source of the Quote!</Source></Item>";

var xmlDoc = parseXml(xmlStr);
$xml = $(xmlDoc);

$xml.find('Item').each(function() {
    // Do stuff with each item here
    alert("Item");
});

Answer 2

Just tried this and the only thing I had to change was the find line to match the case of the XML node, eg

$(quoteObj).find('ITEM').each( function() {

I did also change the $that assignment line to include the var keyword, but it was working before I did that

var $that = $(this);