Reading XML with jQuery

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);
				});
			});
		}
	});
});
 

 

你可能感兴趣的:(html,jquery,xml,Ajax,css)