Question

我正在尝试使用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。

追加是我从xml文件中了解生成html的唯一方法，并且仍然使用单独的样式表来添加样式。任何帮助都会非常感激。

Answer 1

这是因为你只能使用id ONCE。你必须使用类。更改代码，例如到：

$('.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");

Answer 2

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

如何使用jQuery append将嵌套的xml数据放入正确的html元素？

2 个答案: