这样，我们就可以在函数中通过data变量来遍历JSON数据结构了。具体来说，需要迭代顶 级数组，为每个项构建相应的HTML代码。虽然可以在这里使用标准的for循环，但我们要借此机会介绍jQuery的另一个实用全局函数$.each(),在第5章中，我们曾看到过它的对应方 法.each()。$.each()函数不操作jQuery对象，它以数组或对象作为第一个参数，以回调函数 作为第二个参数。此外，还需要将每次循环中数组或对象的当前索引和当前项作为回调函数的两 个参数，参见代码清单6-5。
代码清单6-5
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) { var html ='';
$.each(data, function(entryIndex, entry) { html += '<div class="entry">';
html += '<h3 class="term">' + entry.term + '</h3>';
html += '<div class="part">' + entry.part + '</div>';
html += '<div class="definition">';
html += entry.definition;
html += '</div>';
html += '</div>';
});
$('#dictionary').html(html);
});
});
});
这里通过$.each()函数依次遍历每个项，并使用entry对象的内容构建起HTML代码结构。 构建好HTML之后，通过.html()把它插人到<div id="dictionary">*，替换其中原有的所 有内容。
安全的HTML
这种方法要求数据中包含可以直接用来构建HTML的安全内容，例如，数据 中不能包含任何<字符。
现在所剩的就是处理词条中的引用语了，这需要使用另一个$.each()循环，参见代码清 单 6-6。
代码清单6-6
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) { var html ='';
$.each(data, function(entryIndex, entry) { html += '<div class="entry">';
html += '<h3 class="term">' + entry.term + '</h3>'; html += '<div class="part">' + entry.part + '</div>';
html += '<div class=MdefinitionM>'; html += entry.definition; if (entry.quote) {
html += '<div class=，，quote，，>';
$.each(entry.quote, function(lineIndex, line) {
html += '<div class=Hquote-lineH>' + line + '</div>';
})；
if (entry.author) {
html += '<div class=Hquote-authorH>' + entry.author + '</div>';
}
html += '</div>';
}
html += '</div>'; html += '</div>';
});
$('#dictionary').html(html);
});
