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

Question

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.

tobspr · Accepted Answer · 2012-10-23 17:40:16Z

1

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

answered Oct 23, 2012 at 17:40

tobspr

8,4265 gold badges36 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Orophen Over a year ago

I appreciate the tip. Guess I've got to go through the basics more. Still a beginner.

Paul Knopf · Accepted Answer · 2012-10-23 17:45:43Z

0

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">')

answered Oct 23, 2012 at 17:45

Paul Knopf

9,80424 gold badges83 silver badges158 bronze badges

1 Comment

Orophen Over a year ago

This did the trick. Everything is in it's proper place now. Thanks a lot.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related