javascript - 循环遍历 div 以随机顺序添加一个类

Question

我有多个具有相同“pic”类的元素，每个元素都有自己的递增类（pos_1、pos2、pos_3 等），用于控制其在页面上的位置。

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

如果我不想在 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')
}

演示：小提琴

更新

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

演示：小提琴

Answer 2

create a array with length of number of divs you have and shuffle that array. Now loop through that array using its index and assign class accordingly.

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