如何创建一个基于XML的菜单

我试图通过jquery从xml文件创建一个菜单。

我需要运行这个脚本，在窗口加载。这是一个下拉菜单，在我的plugins.js中有一些jquery代码我试图将xml的所有项目完全添加到菜单列表类的UL…

下面是我需要添加菜单的代码:

HTML

<li class="w-nav-item level_1 has_sublevel">
<a class="w-nav-anchor level_1" href="#">
<span class="w-nav-icon"><i class="fa fa-files-o"></i></span>
<span class="w-nav-title">Animals</span>
<span class="w-nav-arrow"></span>
</a>
<!-- level 2 -->
<ul class="w-nav-list level_2">
<!---------------1 START animals with sublevel---------------->
<li class="w-nav-item level_2 has_sublevel">
    <a class="w-nav-anchor level_2" href="javascript:void(0);">
        <span class="w-nav-title">Birds </span>
        <span class="w-nav-arrow"></span>
    </a>
    <!-- level 3 -->
    <ul class="w-nav-list level_3">
        <li class="w-nav-item level_3">
            <a class="w-nav-anchor level_3" href="animals/1_sparrow.html">
                <span class="w-nav-title">Sparrow</span>
                <span class="w-nav-arrow"></span>
            </a>
        </li>
        <li class="w-nav-item level_3">
            <a class="w-nav-anchor level_3" href="animals/1_crow.html">
                <span class="w-nav-title">Crow</span>
                <span class="w-nav-arrow"></span>
            </a>
        </li>
    </ul>
</li>
<!---------------END animals with sublevel------------------>
<!---------------2 START animals with sublevel---------------->
<li class="w-nav-item level_2 has_sublevel">
    <a class="w-nav-anchor level_2" href="javascript:void(0);">
        <span class="w-nav-title">Carnivorous Animals</span>
        <span class="w-nav-arrow"></span>
    </a>
    <!-- level 3 -->
    <ul class="w-nav-list level_3">
        <li class="w-nav-item level_3">
            <a class="w-nav-anchor level_3" href="animals/2_tiger.html">
                <span class="w-nav-title">Tiger</span>
                <span class="w-nav-arrow"></span>
            </a>
        </li>
    </ul>
</li>
<!---------------END animals with sublevel------------------>
<!---------------3 START animals with sublevel---------------->
</li>
<!---------------END animals with sublevel------------------>

这是我需要创建菜单的XML ..:

XML

<items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
        <item>
            <animal_id>1_1</animal_id>
            <animal_title>Sparrow </animal_title>
            <animal_generic>A Sparrow Bird</animal_generic>
            <animal_category>Birds </animal_category>
            <animal_code>Code 152</animal_code>
            <animal_img>images_animals/1_1_sparrow.png</animal_img>
            <animal_url>1_sparrow.html</animal_url>
        </item>
        <item>
            <animal_id>1_2</animal_id>
            <animal_title>Crow</animal_title>
            <animal_generic>A Crow Bird</animal_generic>
            <animal_category>Birds </animal_category>
            <animal_code>Code 153</animal_code>
            <animal_img>images_animals/1_2_crow.png</animal_img>
            <animal_url>1_crow.html</animal_url>
        </item>
        <item>
            <animal_id>2_1</animal_id>
            <animal_title>Tiger </animal_title>
            <animal_generic>A Wild Tiger</animal_generic>
            <animal_category>Carnivorous Animals </animal_category>
            <animal_code>Code 151</animal_code>
            <animal_img>images_animals/2_1_tiger.png</animal_img>
            <animal_url>2_tiger.html</animal_url>
        </item>
        ...
        ...
        ...

我试图将xml中的所有"项目"附加到菜单中，按照li列表的div格式。<ul class="w-nav-list level_2">

后

我有这个代码，我用它来添加"国家"到我的联系方式，但我不知道如何改变它来添加所需的div。

与问题无关，而是一个简单的代码

var cList = $('ul.w-nav-list.level_2')
    $.each(data, function(i)
    {
    var cat_no = data.id.split('_');
    var opt = $('<option/>')
        .attr('value', countries[i])
        .text(countries[i])
        .appendTo(cList);
    });

我有XML id的格式为:

XML ID格式

1_1: first item, category 1,
1_2: second item, category 1,
1_3: third item, category, 1,
2_1: fourth item, category 2,
3_1: fifth item, category 3,

…像这样，大约有10-13个类别，大约有100个XML项。

我相信这样的事情应该做:

ajax: xml_url, etc
xml response, data ,
data.xml_id.split('_'); //to get the first element of the xml id, but I guess this would only return the last element. Don't know how to change it to return first element.

    function add_menu(){
$('ul.w-nav-list level_2').append(data, function ( ){ for(i=0;i<=data.length) for all data.xml_id==i: add category + item divs, li, ul, /li, /ul) }

以上只是一种算法或我认为如何做到这一点的一种方式…我不知道如何在jquery/javascript中做到这一点。

这是我在javascript/jquery中尝试做的:

<标题> Javascript h1> 有人提供帮助关于这个吗?

这是没有菜单的jsfiddle html: http://jsfiddle.net/mohitk117/d7XmQ/2/

这里是jsfiddle，用html填充菜单，这是我想在菜单中得到的一般想法，但只能通过jquery+xml动态创建，而不是像这里的html示例那样硬编码:http://jsfiddle.net/mohitk117/r6LQg/

我不知道如何将xml上传到小提琴，也不知道要写什么javascript代码，所以我保持代码类似于算法。

编辑:

更新javascript代码…+更新jsfiddle: http://jsfiddle.net/mohitk117/d7XmQ/4/

谢谢…

"use strict";
var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';
$(function () {
    var $menu = $('.w-nav-list.level_2');
    $.ajax({
        url: animalsXMLurl, // name of file you want to parse
        dataType: "xml",
        success: handleResponse,
        error: function () {
            console.log('Error: Animals info xml could not be loaded.');
        }
    });
    function handleResponse(xmlResponse) {
        var $data = parseResponse(xmlResponse);
        createMenu($data);
    }
    function parseResponse(xmlResponse) {
        return $("item", xmlResponse).map(function () {
            var $this = $(this);
            return {
                id: $this.find("animal_id").text(),
                title: $this.find("animal_title").text(),
                url: $this.find("animal_url").text(),
                category: $this.find("animal_category").text()
            };
        });
    }
    function createMenu($data) {
        var categories = {};
        $data.each(function (i, dataItem) {
            if (typeof categories[dataItem.category] === 'undefined') {
                categories[dataItem.category] = [];
            }
            categories[dataItem.category].push(dataItem);
        });
        for (var category in categories) {
            var categoryItems = categories[category];
            $menu.append($('<li class="w-nav-item level_2 has_sublevel">').html('<a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + category + '</span><span class="w-nav-arrow"></span></a>' + createCategory(categoryItems) + '</li>'));
        }   //console.log($menu.html());
    }
    function createCategory(categoryItems) {
        var $list = $('<p>');
        $.each(categoryItems, function (i, dataItem) {
            var $item = $('<li class="w-nav-item level_3"></li>')
                .html('<a class="w-nav-anchor level_3" href="' + dataItem.url + '"><span class="w-nav-title">' + dataItem.title + '</span><span class="w-nav-arrow"></span></a>');
            $list.append($item);
        });
        var list_array = ['<ul class="w-nav-list level_3">' , '</ul>'];
        return list_array[0] + $list.html() + list_array[1];
    }
    function createItem() {}
});

$(function() {
    $.get(
         'animals.xml', 
         {}, 
         function(data) { 
             xml = $.parseXML(data); 
             populateMenu(xml); 
         });
    function populateMenu(xml) {
        xml_items = xml.getElementsByTagName('item');
        for(var i in xml_items) {
             var animal_id = xml_items[i].childNodes[1].innerHTML;
             var animal_title = xml_items[i].childNodes[3].innerHTML;
             var animal_generic = xml_items[i].childNodes[5].innerHTML;
             var animal_category = xml_items[i].childNodes[7].innerHTML;
             var animal_code = xml_items[i].childNodes[9].innerHTML;
             var animal_img = xml_items[i].childNodes[11].innerHTML;
             var animal_url = xml_items[i].childNodes[13].innerHTML;
             $('.w-nav-list.level_3').append('<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="'+animal_img+'"><span class="w-nav-title">'+animal_title+'</span><span class="w-nav-arrow"></span></a></li>');   
        }
    }
});