在现有数据中附加更多数据

时间:2013-10-17 21:26:15

标签: javascript jquery

我希望不要问这个问题,因为我决定阅读更多并做更多的研究,但目前我对此并没有太大的了解。

这是我的代码:

function listPosts(data) {
    var $count = data.count;
    var limitposts = 5;
    var $output = $('<ul class="posts" data-role="listview" data-filter="true">')
    $.each(data.posts,function(i, val) {
        console.log(i);
        if (i<limitposts && i>=0) {
    var $post = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
    $output.append($post).appendTo('#postlist');
        i++;
   // return (i !== 4);
}});

}

HTML

<!-- Page: home -->
    <div id="home" data-role="page" data-theme="d" data-title="My first App">
        <div data-role="listview">
            <a href="#devotion" id="devotionclick" data-role="button">Display Messages</a>
        </div><!-- links -->
    </div><!-- page -->

    <div id="devotion" data-role="page" data-title="My first App">
        <div data-role="header" data-theme="a" data-position="fixed"> <h2>Devotional Messages</h2></div><!-- header -->
        <div data-theme="d" data-role="listview" id="postlist"> </div><!-- content -->
        <div class="addMorePosts">Load More Posts...</div> 
    </div><!-- page -->

<script src="http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=listPosts" type="text/javascript"></script>

我最初使用Return语句限制显示的帖子数量。我现在将其更改为For语句,以查看是否可以通过单击按钮来增加显示的帖子数。

在这个阶段,我试图弄清楚要使用的最佳逻辑。我试图添加另一个功能来实现这一点,但没有运气。仍在阅读和研究,但希望得到指导或良好的榜样

1 个答案:

答案 0 :(得分:0)

function addMorePosts ( data, offset, amount ) {

    var $postsList = $('#postlist'),
        posts = data.slice(offset, amount);

    $.each(posts, function ( index, post ) {

        $postsList.append(
            '<li>' +
                '<h3>' + post.title + '</h3>' +
                '<p>' + 
                    post.excerpt + 
                    '<a href="#devotionpost" onclick="showPost(' + post.id + ')"></a>' +
                '</p>' +
            '</li>'
        );

    });

}

JSFiddle:http://jsfiddle.net/V4Ucv/2/

相关问题