Javascript 按类交换div

我见过很多类似的问题，但我认为没有一个能解决这个问题

我有一个以这种格式构建的页面，它可以控制网页动态部分的内容，我希望它能够根据 使用“switchme”类进行div。因此，基本上我希望所有内容都可以交换，而不需要改变“switchme”中的内容，只需要改变它在页面中的位置。我尝试了很多javascript和jquery脚本，但最终它总是在内部div中移动

<div class= "switchme_container">
<div class = "switchme">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
<div class = "switchme">
<div>Content</div>
<div></div>
<div></div>
<div></div>
</div>
<div class = "switchme">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
</div>

<script>
function shuffle(sj) {              
var replace = $('<div>');
var size = sj.size();

while (size >= 1) {
   var randomize = Math.floor(Math.random() * size);
   var tempdiv = sj.get(randomize);      
   replace.append(tempdiv);        
   sj = sj.not(tempdiv); 

}
$('#switchme_container').html(replace.html() );   
</script>

内容
内容
内容
内容
内容
内容
内容
内容
内容
函数shuffle（sj）{
变量替换=$（''）；
var size=sj.size（）；
而（大小>=1）{
var randomize=Math.floor（Math.random（）*大小）；
var tempdiv=sj.get（随机化）；
replace.append（tempdiv）；
sj=sj.not（tempdiv）；
}
$（'#switchme_container'）.html（replace.html（））；

移动某物的一般公式非常简单：

 $newParent.append($thingToMove);

（注意：如果要放弃

$thingToMove

上的事件处理程序/数据，可以先在其上调用

.remove（）

。）

---

如果这对您不起作用，您需要解决一个调试问题，但这通常会起作用。

我已将随机事件附加到一个按钮单击，答案嵌入以下代码的注释中：

​$('#randomize').click(function(ev){
    ev.preventDefault();

    var $sc = $('.switchme_container'),
        contentHolder = [],
        randomIndex;

    // detach .switchme elements from page and add to contentHolder array
    $sc.find('.switchme').each(function(i, el){
        contentHolder.push($(this).detach());
    });

    while (contentHolder.length) {

        // pick a random index of the contentHolder array
        randomIndex = Math.floor(Math.random() * contentHolder.length);

        // append it to the container
        $sc.append(contentHolder[randomIndex]);

        // slice that element out of the contentHolder array
        contentHolder = contentHolder.slice(0, randomIndex)
            .concat(contentHolder.slice(randomIndex + 1, contentHolder.length));
    }
});​​​​​​

---

您可以将

switchme

元素复制到一个数组中，以更明显的方式将它们洗牌，然后将它们推回

switchme\u容器中

元素：

var shuffle = function(o){ //v1.0
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};
$(".switchme_container").append(shuffle($.makeArray($(".switchme"))));

jsFiddle：

jQuery自动移动每个元素，而不是复制它，除非在插入之前显式克隆它

---

从这里复制的Shuffle函数：

你能发布一个你尝试过的东西吗？这只是很多东西中的一个，我也尝试过弄乱标签，所以它们只有一个div，但这真的扼杀了我的风格我不确定“交换”实际上是你想要的…你能澄清一下吗？你想把随机切换的内容复制到“替换”中吗div？你能提供一个无序标记的例子吗？每个switch me都是横幅中的一张幻灯片，第一张是最先出现的，我需要它们是随机的，而不是每次你甚至不需要

.remove（）

。事实上，

.remove（）

删除事件处理程序和数据。很好的一点；我不确定是否需要删除（并认为“清理不会有什么坏处”）；我将编辑我的答案。