I have a page which lists details of magazine news items, but sometimes there will one link to particular magazine and other times there can be more than one.
Problem is jquery parses XML perfectly, but when it comes to child elements/neste开发者_运维技巧d tags of links....its messes up. It doesnt list all the child nodes.
HTML
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "news.xml",
cache: false,
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
var id = $(this).attr('id');
var title = $(this).find('title').text();
var date = $(this).find('date').text();
var description = $(this).find('description').text();
if(description.length >= 250){
description = description.substring(0, 250)+ '...';
}
$('#page-wrap')
.append($('<h1 id="link_'+id+'"></h1>').html(title))
.append($('<em></em>').html(date))
.append($('<p></p>').html(description))
.append($('<p></p>').html(name));
$(this).find('links').each(function(){
var name = $(this).find('link').attr('name');
var url = $(this).find('link').text();
$('<a href="'+url+'">'+name+'</a>').appendTo('#page-wrap');
});
});
}
});
});
</script>
XML here
<news>
<item id="0">
<title>Main title 1</title>
<date>20 Aug 2010</date>
<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nunc lacus, commodo sit amet euismod vitae, semper quis libero. Praesent nunc nibh, mollis nec elementum et, facilisis sit amet metus. Proin dignissim interdum dui vehicula dapibus. Mauris eget est sed odio blandit tempor vitae quis leo.
</description>
<links>
<link name="Hello">123.com</link>
<link name="HelloJack">123.com</link>
</links>
</item>
<item id="2">
<title>Main title 2</title>
<date>20 Aug 2010</date>
<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nunc lacus, commodo sit amet euismod vitae, semper quis libero. Praesent nunc nibh, mollis nec elementum et, facilisis sit amet metus. Proin dignissim interdum dui vehicula dapibus. Mauris eget est sed odio blandit tempor vitae quis leo.</description>
<links>
<link name="Hello">123.com</link>
</links>
</item>
</news>
Never mind fixed the problem
changed this:
$(this).find('links').each(function(){
var name = $(this).find('link').attr('name');
var url = $(this).find('link').text();
$('<a href="'+url+'">'+name+'</a>').appendTo('#page-wrap');
TO
$(this).find('link').each(function(){
var name = $(this).attr('name');
var url = $(this).text();
$('<a href="'+url+'">'+name+'</a>').appendTo('#page-wrap');
This will alert each attribute of the current selector, without having to specify what those attributes are anywhere else:
$.each($(".mySelector"), function() {
var nodes = this.attributes;
for(var i=0; i<nodes.length; i++)
{
alert(nodes[i].nodeName);
alert(nodes[i].nodeValue);
}
});
You could replace the alert with, for example, an appendTo to add them to elements in a container. Let me know if you need more clarification.
精彩评论