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

我有多个“li”元素：

$(".my_lis")

---

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

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

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

工作演示： 代码：

---

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

---

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

只需像这样使用它： $'.my_lis'.shuffle

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

使用

---

使用：$.my_lis.reorder

其实并不难。总的想法是：

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

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

这只是一个洗牌任何数组的例子

---

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

var $collection = $(".my_list li");
var shuffled = [];
$collection.each(function() {
    shuffled.push(this); //Push DOM element
}).after('<span class="dummy"/>');

$('span.dummy').each(function(index) {
   $(this).replaceWith(shuffled.splice(Math.random()*shuffled.length),1);
});

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