javascript - How to show X number of divs at a time in Javascript?

Question

Assuming I have an array of names:

var myarray = ["A", "B", "C", "D", ... "J"]

Say if I have 10 entries in my array and I only want to show 3 at any given time. How do I make it such that each entry, if shown, is shown in a div of red color with a "Back" link and a "Next" link? When I click next, it will show the next 3; when I click on previous it will show the previous 3.

Example:

Initially 3 Divs are Shown

"A"  "B"  "C"

Clicking on "next" shows

"D" "E" "F"

Clicking on "previous" shows

"A" "B" "C"

Clicking on "next" 3 times shows only 1 div "J"

How to go about this with Javascript or jQuery? Any sample is appreciated.

Answer 1

Just whipped something up really quickly. I assume there is a better pattern for this... But it should work for any array full of whatever.

This has 'next' and 'prev' buttons: http://jsfiddle.net/aEYSB/

(function(){
    var index = 0,
        increment = 3,
        container = $( '#container' ),
        arr = [ 0,1,2,3,4,5,6,7,8,9,10,11,12 ],
        len = arr.length,
        limit = len - 1,

    renderMarkup = function(){
      var markup = [
        '<p>' + arr[index] + '</p>' 
      ];
      container.append( markup.join( '' ) );        
    };

    $( '#next' ).click( function(){
      container.empty();
      for( var i = 0; i < increment; i++ ){
        renderMarkup();
        if( index === limit ){ break; }
        index++;
      }
    });

    $( '#prev' ).click( function(){
      container.empty();
      for( var i = 0; i < increment; i++ ){
        renderMarkup();
        if( index === 0 ){ break; }
        index--;
      }
      var p = $( 'p' ).get().reverse();
      container.empty().append( p );
    });
})();​

This will form a continuous carousel: http://jsfiddle.net/fSNhK/

(function(){
    var index = 0,
        increment = 3,
        container = $( '#container' ),
        arr = [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13 ],
        len = arr.length,
        limit = len - 1,

    renderMarkup = function(){
      var markup = [
        '<p>' + arr[index] + '</p>' 
      ];
      container.append( markup.join( '' ) );        
    },

    controlIndex = function(){
      ( index === limit ) ? index = 0 : index++;
    };

    $( '#toggle' ).click( function(){
      container.empty();
      for( var i = 0; i < increment; i++ ){
        renderMarkup();
        controlIndex();
      }
    });
})();​

Answer 2

ここから1つ試してください：http ：//www.jquery4u.com/plugins/10-jquery-pagination-plugins/#.UElwFo0geSo またはjQueryページネーションを探してください

Answer 3

Set start = 0;

Loop from start to start + 3;

Change start to start+3 , and loop again

Answer 4

Here's one solution - http://jsfiddle.net/joplomacedo/3edpw/ - works as you suggested.

var prev = document.getElementById('previous'),
    next = document.getElementById('next'),
    log  = document.getElementById('log'),
    array  = [0,2,3,9,32,2,5,8,9, 79],
    count = 0,

    updateLog = (function () {
        var x,
            amount_to_show = 3;

        return function () {
            x = count * amount_to_show;
            log.innerText = array.slice(x, x+amount_to_show).join(', ');
        };
    })(),

    nextClick = (function () {
        var x = Math.ceil(array.length / 3 - 1);

        return function () {
            if ( count != x ) {
                ++count ;
                updateLog();
            }
        };
    })(),

    previousClick = function () {
        if ( count != 0 ) {
            --count;
            updateLog();
        }
    };


prev.onclick = previousClick;
next.onclick = nextClick;

updateLog();

Answer 5

try this

HTML

<div class="main">
    <input type="submit" value="next" id="next">
    <input type="submit" value="prev" id="prev">
    <div class="show"></div>
</div>

JS CODE

$(document).ready(function(){
    var arr = ['a', 'b', 'c', 'd','e','f'];
    var goindex = [];
    var len=0;
    $('#next').on('click', function(){
        var next= [];
        for(var i=len; i<len+3; i++){
          next[i] = arr[i];
            goindex[i]=i;
        }
        len += 3;
        console.log(len);
        $('.show').text(next);

    });

    $('#prev').on('click', function(){
        var prev = [];
        console.log(len);
        var newlen=0;
        if(newlen>=0){
            for(var i=len-1; i>=newlen; i--){
              prev[i] = arr[i];
            }
        }
        newlen=len-3;
        len-=3;
        $('.show').text(prev);
    });
});

JS FIDDLE LINK