Question

我正在使用这个XML数据集：

<?xml version="1.0" encoding=UTF=8?>
    <peopleNetwork>
     <person id="1">
      <name>Alice</name>
      <friend>Ruby</friend>
      <image>images/ruby.jpg</image>
     </person>
     <person id="2">
      <name>Tom</name>
      <friend>Katty</friend>
      <image>images/ketty.jpg</image>
     </person>
    </peopleNetwork>

正如你所看到我有带图像路径的图像标签，我写了一个小提琴中显示的代码 - 我不确定我做错了什么，但路径没有转换为实际图像。

$("#container").append('<div class"peopleNetwork"><img src="images/' + $(xmlDoc).find("image").text() + '/><p>' + $(xmlDoc).find('person[id="1"]').text() + '</p></div>');

https://jsfiddle.net/3zg8nyat/

任何人都可以帮忙。

Answer 1

首先，您的XML格式错误。这可以防止任何专用工具对其进行解析。在哪里说：

<?xml version="1.0" encoding=UTF=8?>

......应该说：

<?xml version="1.0" encoding="UTF-8"?>

解决此问题后，您需要parse your XML与jQuery.parseXML()：

jQuery.parseXML使用浏览器的本机解析功能创建有效的XML文档。然后可以将此文档传递给 jQuery创建一个可以遍历的典型jQuery对象操纵。

var xml = $($.parseXML(xmlDoc))
var src = xml.find("image").text();
console.log(src);

请查看online demo。

其他问题：

您不会关闭src属性的引号：

'<img src="images/' + $(xmlDoc).find("image").text() + '/>'

您可以一次检索所有图片，因为jQuery.text()获取：

匹配元素集合中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容

Answer 2

src标记中的img以images/images/filename.jpg形式显示。图像文件是否真的位于另一个images子目录中的images子目录中？

从您的images/标记中删除硬编码的img，或从XML中的每个images/节点值中取出<image>。

XML图像路径不使用JQuery转换为实际图像

2 个答案: