jQuery Math.random: avoid repeating same item

Question

I have this function which makes my divs "slide" randomly every 3 seconds:

$(function () {
  $('.fadein p:gt(0)').hide();
  setInterval(function () {
      var randomize = 1 + Math.floor(Math.random() * $('.fadein > p').length);
      $('.fadein > p').fadeOut();
      $('.fadein > :nth-child(' + randomize + ')').fadeIn();
  }, 3000);
});

Here's the fiddle. The problem is that sometimes the slides are the same (as the random number generated is the same twice in a row). Can you help me creating some variable to store the last number generated so when the function calls Math.random(), if that number equals the last number generated it calls it again.

Karl-André Gagnon · Accepted Answer · 2014-07-21 19:54:18Z

2

You should check which p are visible before doing you random. Then, you should play within that stack to be sure you are not randoming the same image twice. This code does it :

$(function () {
    $('.fadein p:gt(0)').hide();
    setInterval(function () {
        var $p = $('.fadein > p').not(':visible') //Select only the hidden one
        var randomize = Math.floor(Math.random() * $p.length); //Use only those hidden, remove the 1 since we are now on a 0-based index
        $('.fadein > p').fadeOut();
        $p.eq(randomize).fadeIn(); //Use eq on the hidden p
    }, 3000);
});

http://jsfiddle.net/775pR/3/

answered Jul 21, 2014 at 19:54

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dio Cane Over a year ago

Wow! Perfect! Just as last touch... how can I make also the first p random? I tried setting p:gt(-1) but doesn't quite work..

Karl-André Gagnon Over a year ago

@DioCane with a single selector, you can't. But you can use that : jsfiddle.net/775pR/9

Danijel · Accepted Answer · 2014-07-21 20:24:56Z

1

Try with this example if you want to use "all in one" selector:

$('.fadein > p' ).fadeOut();
$('.fadein > p:not(:visible):eq(' + Math.floor( Math.random() * ($('.fadein > p' ).length-1) ) + ')' ).fadeIn();

FIDDLE

answered Jul 21, 2014 at 20:24

Danijel

12.8k5 gold badges43 silver badges57 bronze badges

Collectives™ on Stack Overflow

jQuery Math.random: avoid repeating same item

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related