Question

我已经看到很多与此类似的问题，但我无法找到解决这个特定问题的问题，或者我认为。

我有一个以这种格式构建的页面控制网页动态部分的集中，我想要它做的是随机基于 div与“switchme”类。所以基本上我希望所有东西都可以交换，而不会让“switchme”内的内容发生变化，只是它在页面中的位置。香港专业教育学院尝试了很多javascript和jquery脚本，但最终它总是在interal divs周围移动

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

Answer 1

您可以将switchme元素复制到数组中，以更明显的方式对其进行随机播放，然后将它们推回switchme_container元素：

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：http://jsfiddle.net/D2jxe/2/

jQuery会自动移动每个元素而不是复制它，除非您在插入它之前明确克隆它。

从这里复制的随机播放功能：How can I shuffle an array?

Answer 2

移动东西的通用公式非常简单：

 $newParent.append($thingToMove);

（注意：如果您想放弃$thingToMove上的事件处理程序/数据，您可以先在其上调用.remove()。）

如果这对您不起作用，则需要解决调试问题，但这通常可以解决。

Answer 3

我已将randomize事件附加到按钮单击，在以下代码的注释中嵌入了答案：

$('#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));
    }
});

按班级交换Div

3 个答案:

See Demo