javascript - 限制函数中动态列表项的数量

Question

我想用我一直在研究的这段代码实现两件事，所以不确定是否要分开问题:

JS:

function listPosts(data) {
    postlimit = 
    var output='<ul data-role="listview" data-filter="true">';
    $.each(data.posts,function(key,val) {   

        output += '<li>';
        output += '<a href="#devotionpost" onclick="showPost(' + val.id + ')">';
        output += '<h3>' + val.title + '</h3>';
        output += '<p>' + excerpt + '</p>';
        output += '</a>';
        output += '</li>';
    }); // go through each post
    output+='</ul>';
    $('#postlist').html(output);
} // lists all the posts

问题:

1:我想将返回的动态列表帖子数量限制为 8

2:虽然我限制了显示的项目，但我想在底部添加“更多...”文本，以便将另一组 8 个项目附加到已显示的列表中。

我已经在尝试一些代码，但希望得到一些指导

Answer 1

function listPosts(data, postlimit) {
    var $output = $('<ul class="posts" data-role="listview" data-filter="true">');

    $.each(data.posts,function(key, val) {   
        $("<li>", {id: "post_" + val.id})
            .append([
                $("<h3>", {text: val.title}),
                $("<p>", {text: val.excerpt})
            ])
            .appendTo($output);

        return (postlimit-- > 1);
    });

    $('#postlist').empty().append($output);
}

// exemplary delegated event handler
$(document).on("click", "ul.posts h3", function () {
    $(this).show();
});

稍后...

listPosts(data, 8);

注释:

• 从 $.each() 中，您可以返回 true 或 false。如果返回 false，循环就会停止。
• 尽量不要从连接的字符串构建 HTML。这很容易出现容易避免的 XSS 漏洞。 jQuery 为您提供安全构建 HTML 的工具。
• 通常，出于同样的原因，请尽量避免使用 .html()，特别是如果您已经有 DOM 元素可供使用。
• 不要使用内联事件处理程序，例如 onclick。完全没有。曾经。