当前位置: 动力学知识库 > 问答 > 编程问答 >

How do I use jQuery append to place nested xml data into the proper html element?

问题描述:

I'm trying to use append to generate html using data from an xml file. But I'm having trouble getting nested data to appear in the proper html elements. Code is coming up. hopefully you can see what I'm going for.

Javascript

$(document).ready(function()

{

$.ajax({

type: "GET",

url: "data.xml",

dataType: "xml",

success: parseXml

});

})

function parseXml(xml) {

$(xml).find('period').each( function(){

$('#timeline').append('<div id="slide">');

$(this).find('event').each(function(i,e){

$('#slide').append('<div class="image-div">\

<h1>' + $(this).attr('year') + '</h1>\

<h2>' + $(this).find('title').text() + '</h2>\

<img src="images/' + $(this).find('image').text() + '" />\

<p>' + $(this).find('description').text() + '</p></div>');

});

$('#slide').append('</div>');

});

}

XML file - data.xml

<?xml version="1.0" encoding="utf-8"?>

<timeline>

<imgurl>images/</imgurl>

<period date="1910">

<event year="1912">

<title>Here's a title</title>

<image>temp.jpg</image>

<description>Lorem ipsum </description>

</event>

<event year="1915">

<title>Here's a title</title>

<image>temp.jpg</image>

<description>Lorem ipsum </description>

</event>

<event year="1917">

<title>Here's a title</title>

<image>temp.jpg</image>

<description>Lorem ipsum </description>

</event>

</period>

<period date="1920">

<event year="1924">

<title>Title number 2</title>

<image>temp.jpg</image>

<description>Lorem ipsum </description>

</event>

</period>

<period date="1930">

<event year="1937">

<title>This is the 3rd one</title>

<image>temp.jpg</image>

<description>Lorem ipsum </description>

</event>

</period>

</timeline>

The html output structure that I'm going for is something like:

<div id="timeline">

<div id="slide">

<div class="image-div">...</div>

<div class="image-div">...</div>

<div class="image-div">...</div>

</div>

<div id="slide">

<div class="image-div">...</div>

</div>

<div id="slide">

<div class="image-div">...</div>

</div>

</div>

But my current code places all image-div elements into the very first #slide div, instead of sorting them into three different #slide divs based on where they're nested in the xml file. I'm actually able to get it working properly with document.write, but that's not ideal for obvious reasons, since it erases my css too.

Append is the only way I know of the generate html from my xml file and still use a separate stylesheet to add styling. Any help would this would be much appreciated.

网友答案:

Tobias is right, you can only use an ID once, however, your code is technically broke for another reason.

Your call...

$('#slide').append('<div class="image-div">

... doesn't take into account the "current context". When creating the slide (appending it), keep a reference to it to do a $object.append to it rather than using jquery to go fetch the element from the DOM again.

var $slide = $('<div id="slide">');
$('#timeline').append($slide);
....
$slide.append('<div class="image-div">')
网友答案:

This is because you can use an id ONLY ONCE. You would have to use classes. Change your code e.g. to:

$('.slide').addClass('add_content');
$(this).find('event').each(function(i,e){
    $('.add_content:first-child').append('<div class="image-div">\
    <h1>' + $(this).attr('year') + '</h1>\
    <h2>' + $(this).find('title').text() + '</h2>\
    <img src="images/' + $(this).find('image').text() + '" />\
    <p>' + $(this).find('description').text() + '</p></div>');
});
$('.add_content:first-child').append('</div>').removeClass("add_content");
分享给朋友:
您可能感兴趣的文章:
随机阅读: