jquery显示相关的xml类别

时间:2011-02-21 21:58:42

标签: jquery jquery-selectors

我有一个像这样的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() );
    });
}

我不知道我在做什么做得好,我不能展示每个类别的漫画项目。

你会如何做到这一切?

提前致谢。

1 个答案:

答案 0 :(得分:0)

我现在正在使用它,但我确信它可以用另一种简单而干净的方式完成¿?

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

任何人都可以告诉我,我应该以另一种方式做什么?

非常感谢。