Question

I have an xml file like this:

<?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>

and i want to convert the categories items into links and when i click in this categories show in a div the corresponding comics
I’m new to jquery and this is the jquery i’m writting:

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

I don’t know if iwhat i’m doing is well done and i cant show the comic items for every category.

How would you do all this?

Thanks in advance.

Answer 1

i have it working now but i’m sure it can be done in another simple and clean way ¿?

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

May anyone tell me what of what i’ve done should be done in another way?

Thank you very much.