jQuery加载列表问题

Question

I am using this function to "load more" list items as required.

The load more function I am using: http://jsfiddle.net/cse_tushar/6FzSb/2/

I am populating my list with PHP. My problem is that all the list items are displayed when the page loads. When I click on load more the functionality starts working and I can load more or load less. Only 3 list items should be displayed on page load (x=3).

Any ideas how I can resolve this?

Thanks in advance!

List code:

<?php include('comments.php'); 

                /*
                /   Output the comments one by one:
                */
                foreach($comments as $c){

                    echo $c->markup();
                }

                ?>

comments.php (simplified):

    class Comment
    {
public function markup()
    {

            return '<li>$text</li>' };

};

The JS of the load more:

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

Answer 1

To only output 3 times, then you need to install a counter, (a simple variable) to count how many times you've printed the markup. You can do something like this to accomplish that goal:

$i = 0;
foreach($comments as $c){
  $i++;
  if($i < 4) {
    echo $c->markup();
  }
 }