Question

我有多个具有相同'pic'类的元素，每个元素都有自己的递增类（pos_1，pos2，pos_3等）来控制它在页面上的位置。

我想创建一个循环，以便每个元素都添加了'animate'类，但我想以随机顺序遍历元素。

如果我不想在JS中使用硬编码的元素数组，我该怎么做呢。

我的html元素的一个例子是：

<div class="pic pos_1">
    ...
</div>

<div class="pic pos_2">
    ...
</div>

<div class="pic pos_3">
    ...
</div>

Answer 1

尝试

var arr = $('.pic').get();
while(arr.length){
    var el = arr.splice(Math.floor(Math.random() * arr.length), 1);
    $(el).addClass('animate')
}

演示：Fiddle

更新

var arr = $('.pic').get();

function random(arr) {
    if (!arr.length) {
        return;
    }
    var el = arr.splice(Math.floor(Math.random() * arr.length), 1);
    $(el).addClass('animate');
    setTimeout(function () {
        random(arr);
    }, 1000 + Math.floor(Math.random() * 1000))
}
random(arr);

演示：Fiddle

Answer 2

创建一个数组，其长度为你拥有的div数，并将该数组洗牌。现在使用索引循环遍历该数组并相应地分配类。

Answer 3

获取页面中的图片总数，并随机选择要显示的图片索引

//Remove 'animate' class from all pictures.
$('.pic').removeClass('animate');
//Count of pictures in your page.
var picCount = $('.pic').length();      
//Random index of picture.
var picIndexToShow = Math.floor(Math.random() * picCount);

//Random picture from page
var randomPic = $($('.pic')[picIndexToShow]);
//Add 'animate' class
randomPic.addClass('animate');

循环遍历div以随机顺序添加类

3 个答案: