How to randomly select elements with same class?

Question

is there any option in jquery to randomly select number(3) of elements with in the same class name ?

Actually I just wanna slideup up 3 items only which should be randomly

function e(e) {
    var t = $(window).scrollTop(),
        n = t + $(window).height(),
        r = $(e).offset().top,
        i = r + $(e).height() * .8;
    return i >= t && r <= n && i <= n && r >= t
}

function s() {
    if (e(t) && !i) {
        r.each(function (e) {
            $(this).delay(200 + e * 50).animate({
                top: "-110%"
            }, 500)
        }).each(function (e) {
            $(this).delay(200 + e * 100).animate({
                top: "0%"
            }, 500)
        });
        i = !0
    }
    i && $(window).unbind("scroll", s)
}
var n = $("#thumbs"),
    t = $(".thumbnails"),
    r = n.find(".thumb-info"),
    i = !1;
s();
$(window).bind("scroll", s);

DEMO http://jsfiddle.net/sweetmaanu/GgY3Z/

use Math.rand to get a random seed and use it to select your elements(based on their index for example) — SoWhat, Aug 14 '13 at 11:43
@SomeshMukherjee `Math.rand` doesn't exist. You probably mean `Math.random()` which returns a decimal between 0 and 1. — Broxzier, Aug 14 '13 at 11:47
@Broxzier yes that's what I meant. And you can multiply it by your max to get a random number. Math.random()*3 to get 0,1,2 — SoWhat, Aug 14 '13 at 11:49
Could you please use shorter names for your functions and vars? — moonwave99, Aug 14 '13 at 12:11

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

var items = $('.thumbnails');
var random = shuffle(items).slice(0, 3);

Explanation:

$('.thumbnails') selects all elements with class thumbnails
shuffle() returns 3 random elements from the array (check out the link)
.slice(0, 3) grabs the first 3 values of the shuffled array.

Here's a Fiddle I made to see the result: Fiddle

edited May 23 '17 at 10:25

Community

1
1

answered Aug 14 '13 at 11:46

Broxzier

2,909
17
36

1

I'm not seeing a lot of randomness in your suggestion. – nnnnnn Aug 14 '13 at 11:47

score 0 · Answer 2 · answered Aug 14 '13 at 11:50

Use a shuffle algorithm, for example

function shuffleArray(a) { // Fisher-Yates shuffle, no side effects
    var i = a.length, t, j;
    a = a.slice();
    while (--i) t = a[i], a[i] = a[j = ~~(Math.random() * (i+1))], a[j] = t;
    return a;
}

Shuffle your Array of elements;

myArray = shuffleArray(myArray);

Now the first 3 items are random, so loop over them with your slide.

var i;
for (i = 0; i < 3 && i < myArray.length; ++i) {
    // slide myArray[i]
}

cocco · Answer 3 · 2013-08-14T13:26:29.720

0

this is pure js and does that what you need

var fys=function(d,a,b,c){ //FisherYatesShuffle
 a=d.length;
 while(--a){
  b=Math.floor(Math.random()*(a-1));
  c=d[a];d[a]=d[b];d[b]=c;
 }
};
var el=document.getElementsByClassName('thumbnails'),l=el.length;
var n=[];while(l--){n[l]=l};
fys(n)

n now contains the array with the random indexes and you use

el[n[0]] to call the first random element.

edited Aug 14 '13 at 13:26

answered Aug 14 '13 at 11:51

cocco

16,442
7
62
77

What prevents this from choosing the same item all 3 times, resulting in only one item being moved? – Paul S. Aug 14 '13 at 11:52
This also has an extremely small chance that `el[el.length]` will be selected, which is undefined. – Broxzier Aug 14 '13 at 11:54
The best way to explain something to people is always to use the shortest variables names possible, so people clearly understand what a,b,c,d,e,f,g,h and i variables are set too, since those are easy to remember. **FALSE!** Use proper variable names when you're posting examples. Not everyone that's reading the answer is at ease with JavaScript yet. – Jeff Noel Aug 14 '13 at 12:23
the Fisher-Yates shuffle would be to long. the only 2 vars you need to read are el & n ... el contains the element collection with the class thumbnails, n contains an array with the shuffled indexes of the el.pls... – cocco Aug 14 '13 at 12:25

score 0 · Answer 4 · edited Nov 26 '13 at 17:16

Simple for one element do this:

var items = $('.item').length;
var currentItem = Math.floor(Math.random() * (items + 1));
$('.item').eq(currentItem).doSomething();

For some elements:

var number = 10;
for(i=0; i <= number; i++) {
    $('.item').eq(randomElement('.item')).doSomething();
}

function randomElement(el){
    var items = $(el).length;
    var currentItem = Math.floor(Math.random() * (items + 1));
    return currentItem;
}

How to randomly select elements with same class?

4 Answers4