あなたは文字列からXMLをロードする場合：
<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>
それとも、AJAX経由でロードする場合、とJavaScriptを置き換えます。これはではないかもしれないことに注意して
$(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;
});
}
});
}
});
してください大規模なXMLファイルを使用した最適なソリューションブラウザは、ページをレンダリングする前に、ファイル全体を最初に転送する必要があります。だから、おそらくページにa-zリストを作成してから、ユーザーが手紙をクリックしたときにその言葉を動的に読み込む、別の解決法を調べる必要があるかもしれません。したがって、関連性のある必要な単語&の定義のみが要求に応じて転送されます。同じ定義の重複要求を避けるために、これをキャッシュすることもできます。