JQuery показывает связанные категории XML

Question

У меня есть XML-файл, подобный этому:

<?xml version="1.0" ?> 
<scketchit>
    <categories>
        <category title="MANGA" />
        <category title="MARVEL" />
    </categories>
    <comics>
        <comic title="Comic number 1">
            <date>21/02/2011</date>
            <category>MANGA</category>
        </comic>
        <comic title="Comic number 2">
            <date>13/02/2011</date>
            <category>MARVEL</category>
        </comic>
        <comic title="Comic number 4">
            <date>12/02/2011</date>
            <category>MANGA</category>
        </comic>
    </comics>
</scketchit>

, и я хочу преобразовать элементы категорий в ссылки, и когда я нажимаю на эти категории, отображаются в div соответствующие комиксы. Я новичок в JQuery, и это JQuery я пишу:

  $(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "comics.xml",
        dataType: "xml",
        success: xmlParser
    });
  });
function xmlParser(xml) {
    $(xml).find('categories').eq(0).find('category').each(function () {
        $("#categories-data1").append('<div class="title"><a href="#" class="CategoryTab">' + $(this).attr('title') + '</a></div>');
    });

    var nav_link = $('.CategoryTab');  
    nav_link.click( function() { 
        alert( $(xml).find("category:contains('" + nav_link.html() + "')").closest('comic').html() );
    });
}

Я не знаю, хорошо ли я делаю то, что делаю, и я не могу показать комические предметы для каждой категории.

Как бы вы все это сделали?

Заранее спасибо.

Answer 1

у меня это работает сейчас, но я уверен, что это можно сделать другим простым и чистым способом ¿?

  $(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "categories.xml",
        dataType: "xml",
        success: xmlParser
    });
  });

function xmlParser(xml) {
    $(xml).find('categories').eq(0).find('category').each(function () {
        $("#categories-data1").append('<div class="title"><a href="#" class="CategoryTab">' + $(this).attr('title') + '</a></div>');
    });

    var nav_link = $('.CategoryTab');  
    nav_link.click( function() {
        var cat = $(this).html();       
        $("#posts").empty();
        $(xml).find('comic').each(function() 
        {   
            var comic = $(this).attr('title');
            var category = $(this).children('category').text();
            if(category == cat) {
                $("#posts").append('<p>' + comic + '</p>');
            }
        })
    });
}

Может кто-нибудь сказать мне, что из того, что я сделал, должно быть сделано по-другому?

Большое спасибо.