Question

Let’s say I have some classes like:

<div class="something" style="display: none">Some text I would like to show</div>
<div class="something" style="display: none">Some text2 I would like to show</div>
<div class="something" style="display: none">Some text3 I would like to show</div>
<div class="something" style="display: none">Some text4 I would like to show</div>
<div class="something" style="display: none">Some text5 I would like to show</div>

And I want to show random class every few seconds. I suppose pseudo-code would be something like that:

    setInterval(function() {
        $('.something').hide();
        var rand_number = random(1, ('.something').length);
        $('.something').array[rand_number].show();
    }, 5000);

Thanks.

Answer 1

Try to avoid evaluating $('.something') too often:

setInterval(function() {
    var $s = $('.something');
    var r = Math.floor(Math.random() * $s.length);
    $s.hide().eq(r).show();
}, 5000);

If you know that the list of elements won’t change once the document is loaded, you can simplify further:

$(function() { // short-hand for document.ready
    var $s = $('.something');
    var count = $s.length;
    setInterval(function() {
        var r = Math.floor(Math.random() * count);
        $s.hide().eq(r).show();
    }, 5000);
});