Question

I have this code below that basically gets a number of elements and stops them at 6 items. I have then got a button that when clicked loads in remaining divs.

I just want it to load in 6 divs at a time. Does anyone know the way forward to do this at all?

Here is the javascript:

function click_load() {
    var count = 0;
    var item = $('.newsmainimages');
    //var itemClick = $('<a href="#">Load More</a>');

    $(item).each(function() {
        if (++count == 6) {
            $(this).parent().append('<div class="nextClick"><a href="#">Load More</a></div>');
        }
        else if (count > 6) {
            $(this).css('display','none');
        }
    });

    $('.nextClick a').click(function() {
        $(item).each(function(item) {
            $(this).delay(200*item).fadeIn("slow");
        });
        alert(item);
        return false;
    });
}

Cheers

Answer 1

You can use slice for this kind of things

DEMO

    $(function(){


       var count = 6;
       showListItems(0 , count);

       $('button').click(function() {
           showListItems(0, ($('ul li:visible').length) + count);

       });

       function showListItems(firstNumber, lastNumber) 
       {
          $('ul li').slice(firstNumber, lastNumber).fadeIn("slow"); 
       }       


    });​