0

我正在尝试使用 append 使用 xml 文件中的数据生成 html。但是我无法让嵌套数据出现在正确的 html 元素中。代码来了。希望你能看到我要做什么。

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 文件 - 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>

我要使用的 html 输出结构类似于：

<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>

但是我当前的代码将所有 image-div 元素放入第一个#slide div，而不是根据它们在 xml 文件中的嵌套位置将它们分类为三个不同的#slide div。我实际上可以让它与 document.write 一起正常工作，但由于显而易见的原因，这并不理想，因为它也删除了我的 css。

Append 是我知道从我的 xml 文件生成 html 并且仍然使用单独的样式表来添加样式的唯一方法。任何帮助将不胜感激。

4

2 回答 2

1

这是因为您只能使用一次 id。你将不得不使用类。将您的代码更改为：

$('.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");
于 2012-10-23T17:40:16.850 回答
0

Tobias 是对的，您只能使用一次 ID，但是，您的代码在技术上由于另一个原因而损坏。

你的来电...

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

...不考虑“当前上下文”。创建幻灯片（附加它）时，保留对它的引用以对其执行 $object.append 而不是使用 jquery 再次从 DOM 中获取元素。

var $slide = $('<div id="slide">');
$('#timeline').append($slide);
....
$slide.append('<div class="image-div">')
于 2012-10-23T17:45:43.993 回答