Displaying data from XML file using jQuery_问答_开发者

I have the following XML file containing letter and word definitions in this format A - B - C - D - etc…

<container>
    <data name="apple" definition="A sweet fruit. bla bla bla"/>
    <data name="bat" definition="bla bla bla"/>
    <data name="book" definition="bla bla bla"/>
    <data name="cat" definition="bla bla bla"/>
    <data name="cup" definition="bla bla bla"/>
</container>

If I click on B it should load bat and book in a box. If I click on开发者_C百科 book it should display related definition on the right area. How can I create this functionality using jQuery?

If your HTML is like this:

<div class="search" data-letter="a">A</div>
<div class="search" data-letter="b">B</div>
<div class="search" data-letter="c">C</div>
<div class="search" data-letter="d">D</div>
<div id="results"></div>

Then the javascript:

$(function(){

    var xml_data;

    // Load the XML
    $.get("your_xml_file.xml", function(data){

        xml_data = $(data);

        // On click of search buttons
        $(".search").bind("click", function(){

            // Clear the results div
            $("#results").html("");

            // Get the desired letter
            var letter = $(this).data("letter");

            // Loop through each result which has name attribute beginning with letter
            xml_data.find("data[name^='"+letter+"']").each(function(k, v){

                // Append definition to results
                $("#results").append($(this).attr("definition") + "<br/>");
            });

        });

    });

});

This should do what you are asking about.

If you are loading the XML from a string:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        ul ul, span {
            display:none;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var xml = '<container><data name="apple" definition="A sweet fruit. bla bla bla"/><data name="bat" definition="bla bla bla"/><data name="book" definition="bla bla bla"/><data name="cat" definition="bla bla bla"/><data name="cup" definition="bla bla bla"/></container>';
            var xmlDoc = $.parseXML(xml);
            var $xml = $(xmlDoc).find('container');
            var letters = new Object();

            // loop through all the definitions
            $xml.children().each(function(k, v) {
                var letter = $(v).attr('name').charAt(0);

                // only add letters not already added
                if (!letters[letter]) {
                    $('#definitions')
                        .append('<li><a href="#" id="' + letter + '">' + letter + '</a><ul></ul></li>');
                    letters[letter] = 'f';
                }

                // append definitions
                $('#definitions a#' + letter + ' + ul').append('<li><a href="#">' + $(v).attr('name') + '</a><span> - ' + $(v).attr('definition') + '</span></li>');
            });

            // bind click events on the letters to show/hide the words
            $('#definitions li > a').click(function() {
                $(this).next('ul').toggle();
                return false;
            });

            // bind click events on the words to show/hide the definitions
            $('#definitions ul li a').click(function() {
                $(this).next('span').toggle();
                return false;
            });
        });
    </script>
</head>
<body>
    <h1>Defintions</h1>
    <ul id="definitions"></ul>
</body>
</html>

Or if you are loading via AJAX, replace the JavaScript with:

$(function() {
    var $xml;
    var letters = new Object();

    if ($xml == null) {
        $.ajax({
            url : 'definitions.xml',
            dataType : 'xml',
            success : function (xml) {
                $xml = $(xml).find('container');
                console.log($xml);
                $xml.children().each(function(k, v) {
                    var letter = $(v).attr('name').charAt(0).toUpperCase();

                    // only add letters not already added
                    if (!letters[letter]) {
                        $('#definitions')
                            .append('<li><a href="#" id="' + letter + '">' + letter + '</a><ul></ul></li>');
                        letters[letter] = '.'; // store this key in the map (no actual value)
                    }

                    // append definitions
                    $('#definitions a#' + letter + ' + ul').append('<li><a href="#">' + $(v).attr('name') + '</a><span> - ' + $(v).attr('definition') + '</span></li>');
                });

                // bind click events on the letters to show/hide the words
                $('#definitions li > a').click(function() {
                    $(this).next('ul').toggle();
                    return false;
                });

                // bind click events on the words to show/hide the definitions
                $('#definitions ul li a').click(function() {
                    $(this).next('span').toggle();
                    return false;
                });
            }
        });
    }
});

Please be aware that this may not be the best solution with a large XML file; the browser will have to transfer the entire file first, before rendering the page. So you may need to investigate an alternate solution, perhaps creating an a-z list on a page and then dynamically loading the words when a user clicks on a letter. Therefore only the relevant and necessary words & definitions are transferred on demand. You could also cache this to avoid duplicate requests for the same definitions.

jquery is capable of consuming XML. You would like need to use the each function to iterate through your XML and create your page structure from that.