如何用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方式：

只是一个关于改组任何数组的例子

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

Answer 2

一个可靠的选择是在jQuery集合中的每个元素之后插入一个临时虚拟元素，然后随机播放当前集合，并使用混洗列表中的元素替换虚拟集合中的元素。

将DOM元素附加到另一个地方时，该元素会自动从之前的位置删除。

工作演示：http://jsfiddle.net/ryEHm/2/

代码：

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

Answer 3

也许James Padolsey的这个插件可以帮助你：http://css-tricks.com/snippets/jquery/shuffle-dom-elements/

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

以下是演示：http://jsfiddle.net/y4kyw/ - 按“运行”再次对列表进行洗牌

Answer 4

您可以查看jQuery Sortable插件，其中包含很多示例和代码演练/示例：

http://jqueryui.com/demos/sortable/

Answer 5

jsfiddle demo

使用

jQuery plugin to randomly reorder child elements with callback — Gist

使用：$(".my_lis").reorder();