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

我有多个“li”元素：

$(".my_lis")

---

在页面上，我想用JavaScript（我使用的是JQuery）将它们混在一起。如何做到这一点？

一个可靠的选择是在jQuery集合中的每个元素之后插入一个临时伪元素，然后洗牌当前集合，并用洗牌列表中的元素替换伪集合中的元素

将DOM元素附加到另一个位置时，该元素将自动从上一个位置移除

工作演示： 代码：

var$collection=$（“.my_list li”）；
var-shuffled=[]；
$collection.each（函数（）{
shuffled.push（this）；//push DOM元素
}).在（''）之后；
$（'span.dummy'）。每个（函数（索引）{
$（this.replaceWith（shuffled.splice（Math.random（）*shuffled.length））1）；
});

您可以在这里查看jQuery Sortable插件，该插件有很好的示例和代码演练/示例：

---

也许James Padolsey的这个插件可以帮助您：

只需像这样使用它：

$（'.my_-lis'）.shuffle（）

这里有一个演示：–按run再次洗牌列表

使用


要使用：
$（.my_-lis”）.reorder（）
实际上并不难。总的想法是：

抓取所有dom节点
洗牌
清空
并插入洗牌节点
--

如果shuffle（）可以是任何洗牌数组的东西，我更喜欢underline.js，但这里有一种在数组上洗牌的普通JavaScript方法：

这只是一个对任何数组进行洗牌的示例

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

函数洗牌（项目）{
对于（变量索引=0，ln=items.length；索引
当你说shuffle时，你的意思是随机混合它们的顺序吗？请注意，我的答案适用于任何位置的元素，而不仅仅是连续的元素。从技术上讲，你不必指定它。数组在JS中通过引用传递。其中
索引
来自
items.splice（索引，1，swapItem）来源？请注意，您不必清空列表；当您将DOM中的节点附加到新的父节点时，它将自动从旧位置删除。@Phrogz，这很有趣；p我不知道。我很高兴能尝试一下。我并没有否决投票，但请注意，如果该网站离线，或者URL发生变化，您关于堆栈溢出的回答将变得毫无意义。
var items = $('.my_list li').get();

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

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

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