2

我有一个名为“layouts.xml”的 XML 文件，如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<layouts>
   <layout id="layoutA">
     <div class="layout typeA">
       <div class="class1"></div>
       <div class="class2"></div>
     </div>
   </layout>
   <layout id="layoutB">
     <div class="layout typeB">
       <div class="class1"></div>
       <div class="class3"></div>
     </div>
   </layout>
</layouts>

XML 中的每个“布局”元素都包含一组 div 元素，我想将它们作为 HTML 动态插入到我的网页中。我正在尝试这样做：

$.fn.myFunc = function () {
   var url = "layouts.xml";
   var $element = $(this);  // element to append to

   $.get(url, function (responseXml) {
      var $layout = $(responseXml).find('#layoutA').children();
          $element.empty();
          $element.append($layout);
   });
}

$('div#myDiv').myFunc();

这会将标记插入到我的网页中，但是我为这些动态插入的 div 元素创建的 CSS 样式没有被应用。样式应用于已经存在的 HTML 元素，但不应用于任何动态添加的内容。我已经使用在线 w3c 服务验证了 CSS、XML 和生成的 HTML。

我真的很感谢一些帮助让这些 CSS 样式应用！谢谢你。

4

2 回答 2

1

切换到 $.ajax() 方法并指定“文本”的数据类型后，我能够附加 XML，如下所示： 

var $element = $('div#myDiv');

$.ajax({
    url: 'layouts.xml',
    dataType: 'text',
    success: function (data) {
        var $layout = $(data).find('.layout typeA');
        $element.empty();
        $element.append($layout.html());
    }
});

正如 Tap 指出的那样，我需要将 XML 附加为文本。但是，我无法通过 $.text() 或 $.html() 方法将 XML 作为文本从 XML 文档对象中获取，因此我必须更改 AJAX 请求，以便它将 XML 作为文本提供给我（而不是作为 XML 文档对象）。

于 2013-05-24T15:12:21.830 回答
0

不要将 xml 元素附加到您的 html DOM 中，而是附加它的文本值。

$element.append($layout.html());

或者对于多个孩子，

$layout.each(function(){
    $element.append($(this).html());
});
于 2013-05-23T23:07:10.207 回答