Home/ Questions/Q 7404335
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:14:29+00:00

I’m trying to use jQuery 1.4.1 to parse an XML document and construct a

  • 0

I’m trying to use jQuery 1.4.1 to parse an XML document and construct a list of links based on the content of this XML. So far I have this all working quite well in Firefox. However, when I view the same page in IE and Chrome, I see the <div> and <li> elements created, but the <a> elements do not appear. I’m sure I’m missing something simple but after looking at this for a while now, I’m not seeing it.

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>

The XML that is being parsed is the following:

<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>

Thanks in advance for any help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    ‘text’ is not an attribute of an anchor tag, its a child TextNode element. @scald’s solution should work as link.append($(this).attr("title")) creates the text in the correct spot.

    You could also change:

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

    to:

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