Javascript 如何使用XML进行样式设置

XML数据

<moblies>
 <moblie>
    <title>IPhone X</title>
    <image>iphoneX.png</image>
    <price>999</price>
 </moblie>
</moblies>

剧本

$(document).ready(function(){
    $.ajax({
      type: "GET",
      url: "xml/data.xml",
      dataType: "xml",
      success: xmlParser
    });
  });

  function xmlParser(xml) {
      $('#load').fadeOut();
      $(xml).find("moblie").each(function()
      {
          $("#container").append('<div class="moblie"><img src="images/' +
            $(this).find("image").text() + '" width="200" height="300" alt ="' +
            $(this).find("title").text() + '" /><br/><div class="title">' +
              $(this).find("title").text() + '<br/>$' +
              $(this).find("price").text() + '</div></div>');
          $(".moblie").fadeIn(1000);
      });
  }

$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“xml/data.xml”，
数据类型：“xml”，
成功：xmlParser
});
});
函数xmlParser（xml）{
$（“#加载”）.fadeOut（）；
$（xml）.find（“moblie”）.each（函数（）
{
$（“#容器”）.append（“
”+
$（this.find（“title”）.text（）+'
$'+
$（this.find（“price”）.text（）+“”）；
$（“.moblie”）.fadeIn（1000）；
});
}

---

我正在尝试对导入的XML数据进行样式化，但似乎无法了解实际操作的要点。以上我已经提供了我的XML、CSS和用于显示数据的脚本，如果有人知道我哪里出了问题，或者有任何研究链接，我将不胜感激。

您有一个XML文档和一个用于样式设置的CSS

所以问题是你的输出格式是什么？我只能猜测它应该是HTML，但像PDF这样的其他格式也是可能的（需要）

因此，您尝试的不是为XML设置样式，而是将XML转换为HTML，并将样式表应用于此输出（HTML）

实现这一点的最佳方法是使用，因为这种“语言”需要额外设计来转换xml。但是用像你这样的代码来实现也是可能的

另一个解决方案可能是使用regexp替换

但最后但并非最不重要的一点是，我认为您忘记了在结果中包含样式表，如：

<link rel="stylesheet" type="text/css" media="all" href="layout.css" />

如果您使用Javascript解析XML并创建具有

类

属性的HTML

div

元素，那么

moblie

元素样式的CSS规则为什么会起作用？如果你想将CSS应用到你创建的HTML中，你需要

.moblie

或

.title

作为相应的CSS选择器。我试过了，xml数据没有变化，这就是正文中的内容，不确定我的div是否有问题？您是否使用了浏览器的开发人员工具并检查了错误控制台中的脚本或网络错误？您是否知道StackOverflow允许您在问题中嵌入可执行的HTML/CSS/Javascript片段，以便我们轻松重现问题？不需要将代码放入注释中。

<link rel="stylesheet" type="text/css" media="all" href="layout.css" />