如何随机选择具有相同类的元素

在jquery中有任何选项可以随机选择具有相同类名的元素的数量(3)吗？

实际上，我只想向上滑动3个项目，它们应该是随机

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);

演示http://jsfiddle.net/sweetmaanu/GgY3Z/

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

说明：

$('.thumbnails')选择类别为thumbnails的所有元素
shuffle()从数组中返回3个随机元素（检查链接）
CCD_ 5获取混洗数组的前3个值

下面是我制作的Fiddle来查看结果：Fiddle

使用混洗算法，例如

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;
}

打乱元素的数组；

myArray = shuffleArray(myArray);

现在，第一个3项目是随机的，所以用幻灯片循环它们。

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

这是纯js，可以满足的需要

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现在包含具有随机索引的数组，并且您使用

CCD_ 7来调用第一随机元素。

对一个元素来说很简单：

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

对于某些元素：

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;
}

相关内容

最新更新

热门标签：