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

Question

I would like to achieve 2 things with this Code I have been working on so not sure if to separate the Questions:

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

Questions:

1: I would like to limit the number of Dynamic List Posts returned to 8

2: While I limit the displayed items, I want to add a 'More...' text at the bottom so another set of 8 items is appended to already displayed list.

I am already trying out some codes but was hoping to get some guidance

Answer 1

I am answering you on basis of pure logic and implementation of logic. there could be API stuff for it , but I don't really know. Secondly; It would be a good solution to find some jQuery plugin if you don't have any problems with using jQuery.

call the function onMoreClick() upon clicking the More... html item

  var end = 8;
  var start = 1;

  function onMoreClick()
  {
     start = end 
     end = end+8;
     listPosts(data)
  }

  function listPosts(data) {
    postlimit = 
    var output='<ul data-role="listview" data-filter="true">';
    var i = start;
    $.each(data.posts,function(key,val) {   
        if(i<end && i >=start){
        output += '<li>';
        output += '<a href="#devotionpost" onclick="showPost(' + val.id + ')">';
        output += '<h3>' + val.title + '</h3>';
        output += '<p>' + excerpt + '</p>';
        output += '</a>';
        output += '</li>';
        i++;
       }
    }); // go through each post
    output+='</ul>';
    $('#postlist').html(output);
} // lists all the posts

Answer 2

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();
});

later ...

listPosts(data, 8);

Notes:

• from $.each() you can return true or false . If you return false , the loop stops.
• Try not to build HTML from concatenated strings. This is prone to XSS vulnerabilities that are easy to avoid. jQuery gives you the tools to build HTML safely.
• Generally, for the same reason, try to avoid working with .html() , especially if you already have DOM elements to work with.
• Don't use inline event handlers like onclick . At all. Ever.