1

我正在尝试基于 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 保留了元素名称。

我还尝试将源代码更改为此 content+= '\';

但这也不起作用。

任何想法为什么 Chrome 将元素名称“图像”更改为“img”？另外，为什么当它存在于 DOM 中时它无法定位对象“img”？

4

2 回答 2

0

我尝试了相同的示例，并在您的 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>";
     });
于 2013-04-12T19:08:19.687 回答
0

试着告诉它期望什么数据类型。 

$.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");

jQueryget函数是函数的简写ajax。我猜在 jQuery 的内部，chrome 实现猜测文档的类型是 html 而不是 xml，并且可能用“img”替换“image”。

于 2013-04-12T18:34:49.770 回答