的Javascript

Question

我正在尝试通过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 list的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中这样做。

这是我在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.');}
        });
});

有人可以就此提供帮助吗？

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

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

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

编辑：

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

谢谢..

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

Answer 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的菜单？

HTML

XML

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

XML ID格式

的Javascript

编辑：

谢谢..

2 个答案: