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 ファイル内のネストされている場所に基づいて 3 つの異なる #slide div に並べ替えるのではありません。実際には document.write で適切に動作させることができますが、css も消去されるため、明らかな理由から理想的ではありません。

Append は、xml ファイルから html を生成することを知っている唯一の方法であり、別のスタイルシートを使用してスタイリングを追加します。どんな助けでもこれは大歓迎です。

4

2 に答える 2

1

これは、IDを1回だけ使用できるためです。クラスを使用する必要があります。コードを次のように変更します。

$('.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 は 1 回しか使用できませんが、別の理由でコードが技術的に壊れています。

あなたの電話...

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

...「現在のコンテキスト」を考慮していません。スライドを作成する (追加する) ときは、jquery を使用して DOM から要素を再度フェッチするのではなく、スライドへの参照を保持して $object.append を実行します。

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