Как мне стиль с XML

Question

XML-данные

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

CSS

moblies {
  font-size:80%;
  margin:0.5em;
  font-family: Verdana;
  display:block
}

moblie {
  display:block;
  border: 1px solid silver;
  margin:0.5em;
  padding:0.5em;
  background-color:whitesmoke;
}

title, price {
  display:block;
  font-style: italic;
}

Сценарий

$(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);
      });
  }

Я пытаюсь стилизовать данные XML, которые я импортирую, но, похоже, не могу понять суть того, как вы на самом деле это делаете. Выше я предоставил свои XML, CSS и сценарий, который использовал для отображения данных, если у кого-то есть идеи о том, где я ошибся, или будут признательны любые ссылки на исследования.

Answer 1

У вас есть XML-документ и CSS для стилизации.

Итак, вопрос в том, какой у вас формат вывода? Я мог только догадываться, что это должен быть HTML - но возможны и другие, такие как PDF (требуется XML-FO ).

Итак, вы пытаетесь не стилизовать XML - это преобразовать XML в HTML и применить к этому выводу таблицу стилей (HTML).

Лучший способ сделать это - использовать XSLT , потому что этот «язык» должен быть дополнительно разработан для преобразования xml. Но сделать это можно с помощью какого-то кода, подобного вашему.

Другое решение может заключаться в использовании замен регулярных выражений ...

Но последнее, но не менее важное, я думаю, вы забыли включить таблицу стилей в свой результат, например:

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