JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/xmldata.js"></script>
[xmldata.js]JavaScript
$(function(){
function fresh(){
var dlbody = $("#news");
$.ajax({
type: 'GET',
url: 'list.xml',
dataType: 'xml',
success: function(xml){
var newslist = $(xml);
newslist.find('item').each(function(i){
i = i + 1;
if(i == 6) {
return false;
}
var newsitem = $(this);
var newsitem_title = newsitem.find('title').text();
var newsitem_date = newsitem.find('date').text();
var newsitem_link = newsitem.find('link').text();
var dt = $('<dt />').text(newsitem_date);
//var ddlink = $('<a />').text(newsitem_link);
var dd = '<dd><a href="'+newsitem_link+'">'+newsitem_title+'</a></dd>';
dlbody.append(dt);
dlbody.append(dd);
});
}
});
}
fresh();
});
HTMl
<div class="mod_news">
<dl id="news">
</dl>
<!-- /mod_news --></div>
CSS
/* mod_news
-----------------------------------------*/
.mod_news{
margin:50px 0 0 0;
}
.mod_news dl{
position:relative;
overflow:hidden;
}
.mod_news dt{
float:left;
width:130px;
padding:15px 0 0 0;
}
.mod_news dd{
border-bottom:dotted 1px #CCCCCC;
padding:15px 0 10px 130px;
line-height:1.3;
}