【问题标题】：How to create an XML based Menu?如何创建基于 XML 的菜单？
【发布时间】：2014-03-22 23:30:43
【问题描述】：

我正在尝试通过 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>

        ...
        ...
        ...

我正在尝试按照 li 列表的 div 格式将 xml 中的所有“项目”附加到菜单中。在<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 中做到这一点。

这是我在 javasacript/jquery 中尝试做的事情：

Javascript

var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';


$(function() {

$.ajax({
    url: animalsXMLurl, // name of file you want to parse
    dataType: "xml",

    success: function parse(xmlResponse){

        var data = $("item", xmlResponse).map(function() {
         return {
             id: $("animal_id", this).text(),
             title: $("animal_title", this).text(),
             url: $("animal_url", this).text(), 
             category: $("animal_category", this).text().split('/'),
         };
         }).get();
        var categnumber = new Array();
        for(i=0;i<=data.length;i++) //for splitting id, and getting 0 for category_number (1 or 2 or 3...and so on)
         {   categnumber[i] = data[i].id.split('_');
         console.log(categnumber[i][0]); 
        for(j=0;j<=data.length;j++) //appending via a function.
        {  var data_text = category_or_animal(data, categnumber, j);
        console.log(data_text);
            $('ul.w-nav-list.level_2').append( data_text );
        }
        }


                function category_or_animal(d, catg, k){
                var catg1 = new Array();
                var catg2 = new Array();
                var catg1 = d[k].id.split('_');
                if(d[k-1]){
                var catg2 = d[k-1].id.split('_');
                //if(d[k-1].id)
                    if (catg1[0] != catg2[0])
                      return category_gen(d,k);
                }    else return '</ul>' + animal_gen(d,k);
                }
        function category_gen(d,z){
         var category_var = '<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">' + d[z].category + '</span><span class="w-nav-arrow"></span></a><ul class="w-nav-list level_3">'; 
         return category_var;
        }

        function animal_gen(d,z){
          var animal_var = '<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="animals/' + d[z].url + '"><span class="w-nav-title">' + d[z].title + '</span><span class="w-nav-arrow"></span></a></li>';
         return animal_var;
        }

    },  error: function(){console.log('Error: Animals info xml could not be loaded.');}
        });
});

请问有人可以提供这方面的帮助吗？

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

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

我不知道如何将xml上传到fiddle，也不知道要写什么javascript代码，所以我保留了类似于算法的代码。

编辑：

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

谢谢..

【问题讨论】：

我也可以提供一个 jsfiddle，如果这有助于答案...
是的，jsfiddle 将不胜感激
这是 jsfiddle 没有用 html 填充的菜单：jsfiddle.net/mohitk117/d7XmQ/2 这是 jsfiddle，用 html 填充的菜单，这是我试图在菜单中获得的一般概念，但只能通过 jquery+xml 动态创建，而不是像这里的 html 示例那样硬编码：jsfiddle.net/mohitk117/r6LQg

标签： javascript jquery xml

【解决方案1】：

我针对同一个问题提出了另一个问题，但新问题不同。我收到了来自 DannyFritz 的回复，邮件为the answer。他的代码完美地耗尽了 xml 文件并将相关字段放入列表格式。这并不完全是我想要做的，但经过一些添加和更简单的小改动后，我让菜单正常工作。

这是我的基于 xml 的菜单版本的完整编辑代码：[::: JsFiddle :::]

"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() {}
});

【讨论】：

【解决方案2】：

我根据这个问题找到了使用 AJAX 请求和jQuery.parseXML 的解决方案：

Load xml from javascript

$(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>');   
        }
    }
});

代码可以高度优化，但它可以帮助您弄清楚如何去做。

Here 是一个工作中的 jsfiddle。

【讨论】：

嗨马里亚诺！我不仅要解析xml，还要将所有items.animal_url + items.animal_title 完全转换为菜单！通过用尽所有 data.length，我需要创建菜单，以便仅通过 xml 在菜单中添加或删除项目。这样一来，要更改菜单的一部分，就不需要编辑包含菜单的所有 100 页！所有这些都只能通过 Excel 2010 生成的 XML 文件来完成！（我目前正在通过excel创建xml，这对于xml来说很容易，但不知道如何将xml用于动态菜单）
我添加了一个更新的 jsfiddle：第三次改动：jsfiddle.net/mohitk117/d7XmQ/3