0

我有一个xml这样的文件：

<posts>
    <post id="123">
        <title>UN meets on North Korean missile launch - </title>
        <link>index2.htm</link>
    </post>
    <post id="124">
        <title>UN meets on North Korean missile launch - </title>
        <link>index2.htm</link>
    </post>
</posts>

我的html文件中有一个 div，id='contact'我想从我的xml文件中提取数据到我的 div 中html，所以我会从中选择<post>标签xml并从中提取<link>标签，然后将它们中的每一个放在一行中<div class="line">，这样当这个divs 宽度等于页面宽度，<div class="line">将关闭，其余<link>的将附加到<div class="line">将生成的新页面。

<div id="container">

<div id="top-nav">
    <ul>
        <li><a href="#">Website.com</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Abilities</a></li>
        <li><a href="#">Ideas</a></li>
    </ul>
</div>

<div id="content">
<!-- Content Will Goes Here! -->
</div>

<div id="bottom-nav">
    <ul>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Branches</a></li>
        <li><a href="#">Jobs</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Publishs</a></li>
    </ul>
</div>

</div>

我想这样做JQuery：

$(document).ready(function() {

    $.ajax({
        type:"GET",
        url:"posts.xml",
        dataType:"xml",
        success:function(xml){

            var line = '<div class="line"></div>';
            $(line).appendTo('#content');
            $(xml).find('post').each(function(index, element) {

                var postLink = $(element).find('link').text();
                var postFont = $(element).find('font').text();

                var Link = '';
                Link += '<div class="link '+postFont+'"><a href="'+postLink+'">';
                Link += $(element).find('title').text(); 
                Link += '</a></div>';

                var lastLine = $('.line')[$('.line').length-1];
                var lineHeightBefore = parseInt($(lastLine).css('height'));
                //alert(lineHeightBefore);
                    console.log(lineHeightBefore);
                $(Link).appendTo(lastLine);
                var lineHeightAfter = parseInt($(lastLine).css('height'));

                if(lineHeightAfter > lineHeightBefore){
                    $('.link').last().remove();
                    $(line).appendTo('#content');
                    lastLine = $('.line')[$('.line').length-1];
                    $(Link).appendTo(lastLine);
                }

            });

        }
    });
});

但是效果不好。
请查看并测试我的代码以找到问题
谢谢

4

1 回答 1

1

如果您想将内容放入该 DIV。

$("#content").html(-你想要什么-);

前任。$("#content").html("一些东西");

于 2012-04-13T18:18:31.307 回答