javascript - 如何使用 JavaScript 交换屏幕上的元素

Question

我有多个“li”元素:

$(".my_lis")

在页面上，我想用 JavaScript 来随机播放它们(我使用的是 JQuery)。如何做到这一点？

Answer 1

其实并不难。总体思路是:

1. 抓取所有dom节点
2. 洗牌
3. 清空 <ul>并插入打乱的节点

--

var items = $('.my_list li').get();

//edit (per comments): avoid confusion
items = shuffle(items);

$('.my_list').empty().append(items);

其中 shuffle() 可以是任何打乱数组的东西，我更喜欢 underscore.js，但这是在数组上进行打乱的普通 JavaScript 方法:

只是一个洗牌 ANY 数组的例子

function shuffle(items) {

    for(var index = 0, ln = items.length; index < ln; index++) {
        var item = items[index],
            swapIndex = ~~(Math.random() * ln),
            swapItem = items[swapIndex];

        //Swap places
        items.splice(swapIndex, 1, item);
        items.splice(index, 1, swapItem);
    }

    return items;
}