Javascript 循环通过div以随机顺序添加类

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

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

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

my html元素的一个示例是：

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

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

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

...
...
...

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

试试看

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

---

演示：

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

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

---

使用Math.random（）返回一个介于0和1之间的数字。根据元素的数量，将范围划分为0-1。所以你可以这样使用它。假设元素将具有类“animate”，当且仅当Math.random（）返回值大于0.7时。这有意义吗？谢谢你的回答。是我的错，我没有说清楚。然后在不同的时间间隔将animate类添加到.pic元素，以便它们以随机顺序出现在页面上？回答得好。是否可以在1-2秒之间的随机间隔将animate类添加到元素中？非常好。最后一部分，是否有可能多个.pic元素同时移动，而不是一次只移动一个？如果它们同时移动，为什么要麻烦以随机顺序应用.animate类？我很困惑，因为我正在申请CSS3动画课程。我只想让CSS动画在不同的时间间隔发生，这样照片看起来就像是在不同的时间出现一样。非常感谢您的帮助@ArunPJohny。我现在有东西在工作！