jQuery - 从 xml 加载图像在 chrome 中不起作用

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 中，“标题”和“内容”按预期加载，但图像部分返回一个空字符串。我调试了一下，发现如果我只是将元素名称“图像”更改为其他名称，那么相同的代码在 Chrome 中也可以工作。然后我做了一点console.log 来了解后台发生了什么。

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

返回，

HEADING
CONTENT
IMG

在 chrome 中，FF 保留元素名称。

我也试过把源代码改成这个 内容+= '\';

但这也不起作用。

知道为什么 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，并且可能将“image”替换为“img”。

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>";
     });