Question

I have some mark-up like so:

<div class="slideshow">
    <div class="slide" style="display:block;"></div>
    <div class="slide" style="display:none;"></div>
    <div class="slide" style="display:none;"></div>
    <div class="slide" style="display:none;"></div>
</div>

Which is basically some divs with one shown and the others hidden.

I’m trying to find the ones that are currently not shown and then randomly select one of them…

var length = $('div.slideshow').find('div.slide:hidden').length;

var ran = Math.floor(Math.random()*length) + 1;
var newSlide = $("div.slideshow > div.slide:nth-child(" + ran + ")");

However because their is more than one hidden div it will not work… I’m guessing I need to setup an array? Can anyone help me out here as I’m a little confused.

Answer 1

Try below,

DEMO

var $hiddenSlides = $('div.slideshow').find('div.slide:hidden');
var length = $hiddenSlides.length;

var ran = Math.floor(Math.random()*length );
var newSlide = $hiddenSlides.get(ran);