jQuery - 從xml中加載圖像不工作在鉻合

Question

我想將圖像加載到基於XML的屏幕上。這裏是我使用的xml

<item> 
    <heading>Heading 1</heading> 
    <content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla tempus varius. Nulla facilisi. In nisi leo, commodo id vestibulum non, mollis quis justo. Nunc elementum feugiat gravida. Praesent condimentum nisi id sapien placerat sed posuere velit fringilla. Curabitur ac purus odio. </content> 
    <image>image.jpg</image> 
</item> 
<item> 
    <heading>Heading 2</heading> 
    <content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla tempus varius. Nulla facilisi. In nisi leo, commodo id vestibulum non, mollis quis justo. Nunc elementum feugiat gravida. Praesent condimentum nisi id sapien placerat sed posuere velit fringilla. Curabitur ac purus odio. </content> 
    <image>image.jpg</image> 
</item> 

而我正在用這樣的jQuery檢索元素。

$.get('feed1.xml', function(xml) { 
    $(xml).find('item').each(function() { 
    content+= "\<li class=\"paginate\"\>"; 
    content+= '\<img src=\"' + $(this).find('image').text() + '\"\/\>'; 
    content+= "\<h3\>" + $(this).find('heading').text() + "\<\/h3\>" ; 
    content+= "\<p\>" + $(this).find('content').text() + "\<\/p\>"; 
    content+="\<\/li\>"; 
}); 

這適用於Firefox。然而，在Chrome和IE中，「標題」和「內容」按預期加載，但圖像部分返回空字符串。我調試了一下，注意到如果我只是將元素名稱'image'更改爲其他名稱，則相同的代碼在Chrome中也可以使用。然後我做了一個console.log來了解後臺發生了什麼。

$(xml).find('item').children().each(function(){ 
    console.log((this).nodeName); 
}); 

這回，

HEADING 
CONTENT 
IMG 

鉻，而FF保留的元素名稱。

我也嘗試將源代碼改爲這個 content + ='\';

但是這也沒有工作。

爲什麼Chrome會將元素名稱'image'更改爲'img'？另外，爲什麼當它存在於DOM中時無法找到對象'img'？

Answer 1

嘗試告訴它預期的數據類型。

$.get('feed1.xml', function(xml) { 
    $(xml).find('item').each(function() { 
    content+= "\<li class=\"paginate\"\>"; 
    content+= '\<img src=\"' + $(this).find('image').text() + '\"\/\>'; 
    content+= "\<h3\>" + $(this).find('heading').text() + "\<\/h3\>" ; 
    content+= "\<p\>" + $(this).find('content').text() + "\<\/p\>"; 
    content+="\<\/li\>"; 
}, dataType: "xml"); 

jQuery的get功能對於ajax功能的簡寫。我猜測，在jQuery的膽量中，chrome實現是猜測文檔的類型是html而不是xml，並且可能用「img」替換「image」。

Answer 2

我試了同樣的例子，發現你的XML中存在問題。

XML文件必須

<?xml version="1.0" encoding="utf-8"?> 
<hello> 
<item> 
    <heading>Heading 1</heading> 
    <content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla tempus varius. Nulla facilisi. In nisi leo, commodo id vestibulum non, mollis quis justo. Nunc elementum feugiat gravida. Praesent condimentum nisi id sapien placerat sed posuere velit fringilla. Curabitur ac purus odio. </content> 
    <image>image.jpg</image> 
</item> 
<item> 
    <heading>Heading 2</heading> 
    <content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla tempus varius. Nulla facilisi. In nisi leo, commodo id vestibulum non, mollis quis justo. Nunc elementum feugiat gravida. Praesent condimentum nisi id sapien placerat sed posuere velit fringilla. Curabitur ac purus odio. </content> 
    <image>image.jpg</image> 
</item> 
</hello> 

所以jQuery代碼正常工作......

如果你仍然有問題，那麼你可以使用這個

$.get('feed1.xml', function(xml) { 
     $(xml).find('item').each(function() { 
     content+= "<li class='paginate'>"; 
     content+= "<img src='" + $(this).find("image").text() + "'/>"; 
     content+= "<h3>" + $(this).find("heading").text() + "</h3>" ; 
     content+= "<p>" + $(this).find("content").text() + "</p>"; 
     content+="</li>"; 
    });