Question

我正在尝试使用jQuery 1.4.1来解析XML文档，并根据此XML的内容构建链接列表。到目前为止，我在Firefox中都运行良好。但是，当我在IE和Chrome中查看同一页面时，我看到已创建<div>和<li>元素，但<a>元素未显示。我确定我错过了一些简单的东西但是现在看了一会儿后，我没有看到它。

HTML / JavaScript的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#result").ajaxError(function () {
            $(this).text("An error occurred while retrieving the site map");
        });

        // Get the site map XML
        $.get("SiteMap.xml", function (data) {
            // The div element that will contain our menu
            var menu = $("#menu");

            // Iterate over each <Group> element
            $(data).find('Group').each(function () {
                // Create a new div to contain the current group
                var group = $("<div>").text($(this).attr("name"));

                // Create a new list for the current group
                var list = $("<ul>");

                // Now iterate over the <Page> elements contained in the current <Group> element
                $(this).find("Page").each(function () {
                    // Note that since we're doing a nested each(), the context of $(this)     changes
                    // Create a list item and a link for the current page, append to the list
                    var item = $("<li>");
                    var link = $("<a>").attr({ href: $(this).attr("url"), text: $(this).attr    ("title") });

                    item.append(link);
                    list.append(item);
                });

                // Append the list to the group's div and then append the group to the menu
                group.append(list);
                menu.append(group);
            });

            $("#result").text("jQueryDemo Site Map");
        });
    });       
</script>
    <body>
        <div id="result"></div>
        <div id="menu"></div>
    </body>
    </html>

正在解析的XML如下：

<SiteMap>
    <Group name="Selectors">
      <Page url="SelectById.htm" title="Select By Id" />
      <Page url="SelectByCss.htm" title="Select By CSS Class" />
      <Page url="SelectByElement.htm" title="Select By DOM Element" />
    </Group>
    <Group name="Events">
      <Page url="Bind.htm" title="Bind" />
      <Page url="Change.htm" title="Change" />
      <Page url="Click.htm" title="Click" />
      <Page url="Hover.htm" title="Hover" />
    </Group>
    <Group name="AJAX">
      <Page url="Ajax.htm" title="Ajax" />
      <Page url="AjaxError.htm" title="Ajax Error" />
      <Page url="Get.htm" title="Get" />
    </Group>
    <Group name="Animation">
      <Page url="Fade.htm" title="Fade" />
      <Page url="Slide.htm" title="Slide" />
    </Group>
    <Group name="DOM Manipulation">
      <Page url="Append.htm" title="Append" />
      <Page url="AppendTo.htm" title="AppendTo" />
      <Page url="Clone.htm" title="Clone" />
      <Page url="Each.htm" title="Each" />      
    </Group>
</SiteMap>

提前感谢您的帮助！

Answer 1

您是在本地文件系统上运行还是通过Web服务器运行？

Chrome的开发者工具报告：

XMLHttpRequest无法加载文件：//localhost/Users/scald/Desktop/SiteMap.xml。原点为null Access-Control-Allow-Origin不允许。

当我尝试在本地文件系统上运行它时，但当我将其移动到Web服务器时，它会正确加载元素。不过，Firefox在本地文件系统上工作。

我还需要稍微修改链接生成器以获取要在Chrome中显示的实际链接文本：

// Now iterate over the <Page> elements contained in the current <Group> element
                $(this).find("Page").each(function () {
                    // Note that since we're doing a nested each(), the context of $(this)     changes
                    // Create a list item and a link for the current page, append to the list
                    var item = $("<li>");
                    var link = $("<a>").attr({ href: $(this).attr("url")});
// Append title to link separately 
                    link.append($(this).attr("title"));

                    item.append(link);
                    list.append(item);

                });

Answer 2

'text'不是锚标记的属性，它是子TextNode元素。 @scald的解决方案应该正常，link.append($(this).attr("title"))在正确的位置创建文本。

你也可以改变：

var link = $("<a>").attr({ href: $(this).attr("url"), text: $(this).attr    ("title") });

为：

var link = $("<a>").attr({ href: $(this).attr("url") }).text($(this).attr    ("title"));

Answer 3

试试这个



      $(document).ready(function () {
                $("#result").ajaxError(function () {
                    $(this).text("An error occurred while retrieving the site map");
                });

                // Get the site map XML
                $.get("SiteMap.xml", function (data) {
                    // The div element that will contain our menu
                    var menu = $("#menu");
        var xmlData = $(data).find('SiteMap').first();
                    // Iterate over each  element
                    $(xmlData).find('Group').each(function () {
                        // Create a new div to contain the current group
                        var group = $("").text($(this).attr("name"));

                        // Create a new list for the current group
                        var list = $("");

                        // Now iterate over the  elements contained in the current  element
                        $(this).find("Page").each(function () {
                            // Note that since we're doing a nested each(), the context of $(this)     changes
                            // Create a list item and a link for the current page, append to the list
                            var item = $("");
                            var link = $("").attr({ href: $(this).attr("url"), text: $(this).attr    ("title") });

                            item.append(link);
                            list.append(item);
                        });

                        // Append the list to the group's div and then append the group to the menu
                        group.append(list);
                        menu.append(group);
                    });

                    $("#result").text("jQueryDemo Site Map");
                });
            });

jQuery不在IE / Chrome中创建链接，适用于Firefox

3 个答案: