Я пытаюсь создать меню из XML файла, используя jquery.

Мне нужно запустить скрипт для этого, при загрузке окна. Это выпадающее меню с некоторым кодом jquery к нему в моих plugins.js. Я пытаюсь полностью добавить все элементы 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 в меню в соответствии с форматом div списка li. После <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-идентификатора

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

Вышесказанное является просто своего рода alogrithm или способом, как я думаю, что это можно сделать... Я не знаю, как это сделать в 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/

Благодаря..