1

我正在使用一个简单的代码将 XML 文件内容动态加载到 div 中。加载的文件包含带有内联 CSS 的 HTML 代码。该文件加载正常，可以在开发工具中看到，但是它丢失了所有的 CSS，您甚至无法通过开发工具编辑 CSS。奇怪的是，如果我选择“编辑为 HTML”，然后添加一个空格并保存，CSS 就会加载并正常工作！

首先，我怀疑文件内容并尝试了不同的编码，但这似乎不是问题。我还怀疑我需要删除所有空格，但没有用。

我认为附加代码时不会自动应用 CSS。

下面是我用于动态加载的代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({type: "GET", url: "hadeeth.jpg", dataType: "xml",
            success: function (xml) {
                var val;
                var now = new Date();
                var cdate = now.getDate() + "-" + (now.getMonth() + 1) + "-" + now.getFullYear();
                var done = false;
                $(xml).find('hadeeth').each(function () {
                    var idate = $(this).find('date').text();
                    val = $(this).find('value').contents();
                    if (idate == cdate)
                    {
                        $('#ahadeeth').html(val);
                        done = true;
                    }
                });
            }
        });
    });
</script>
<div id="ahadeeth"></div>

这是加载的 div 的示例内容：

<div id="ahadeeth"><h4 style="text-align: center;"><span style="font-size: xx-large;"><strong><span style="font-family: book antiqua,palatino; color: #ff0000;">testing</span></strong></span></h4></div>

在此先感谢您的帮助。

4

2 回答 2

0

将 .contents() 更改为 .html()。看起来您想要元素内部的 html，而不是 jQuery 对象。

http://api.jquery.com/contents/
http://api.jquery.com/html/

编辑：我没有看到你的评论 Barmar，但我同意。

于 2013-05-30T02:20:27.677 回答
0

问题是由于使用 JQuery 对象而不是实际文本。正确的方法是使用 .text() 函数来获取实际的 html 代码，但是它只返回最内部的文本而没有任何 html。

它应该返回这个：

<h4 style="text-align: center;"><span style="font-size: xx-large;"><strong><span style="font-family: book antiqua,palatino; color: #ff0000;">Test</span></strong></span></h4>

但是它只返回这个：

Test

解决方案是将实际的 HTML 代码放在 CDATA 标记中，以便解析器理解它应该将整个内容作为文本返回，而不是尝试解析它。

因此，不要在 XML 中使用以下节点：

<hadeeth>
<date>3-5-2013</date>
<value><h4 style="text-align: center;"><span style="font-size: xx-large;"><strong><span style="font-family: book antiqua,palatino; color: #ff0000;">Test</span></strong></span></h4></value>
</hadeeth>

我添加了 CDATA 标记，使它变成这样：

<hadeeth>
<date>3-5-2013</date>
<value><![CDATA[<h4 style="text-align: center;"><span style="font-size: xx-large;"><strong><span style="font-family: book antiqua,palatino; color: #ff0000;">Test</span></strong></span></h4>]]></value>
</hadeeth>

感谢@Andrew 指出正确的方向，感谢@elektronaut 在下面的线程中使用 CDATA 标签。

jquery XML .html() 而不是 .text() 没有显示？

于 2013-05-30T10:17:36.930 回答