1、sites.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <sites> <site id="0"> <title>Think2Loud</title> <url>http://www.think2loud.com</url> <desc> <brief>this is the brief description.</brief> <long>...and this is the long description. See how long it is :)</long> </desc> </site> <site id="2"> <title>jaredharbour.com</title> <url>http://www.jaredharbour.com</url> <desc> <brief>this is the brief description.</brief> <long>...and this is the long description. See how long it is :)</long> </desc> </site> <site id="3"> <title>Css Tricks</title> <url>http://www.css-tricks.com</url> <desc> <brief>this is the brief description.</brief> <long>...and this is the long description. See how long it is :)</long> </desc> </site> </sites>
2、code
$(document).ready(function(){ $.ajax({ type: "GET", url: "sites.xml", dataType: "xml", success: function(xml) { $(xml).find('site').each(function(){ var id = $(this).attr('id'); var title = $(this).find('title').text(); var url = $(this).find('url').text(); $('<div class="items" id="link_'+id+'"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#page-wrap'); $(this).find('desc').each(function(){ var brief = $(this).find('brief').text(); var long = $(this).find('long').text(); $('<div class="brief"></div>').html(brief).appendTo('#link_'+id); $('<div class="long"></div>').html(long).appendTo('#link_'+id); }); }); } }); });