Question

我正在尝试从已有的选择中创建一个随机选择，但它没有按预期工作。

由于某些原因它正在删除原文中的元素我很困惑为什么

var sizeofmenu = $('.random_menu').children().length;
var myArr = new shuffle(ArrMap(0,sizeofmenu));

var newmenu = $('.new_menu');
$(myArr).each(function(i,v) { 
//console.log(v);
  newmenu.append($('.random_menu').children().eq(v));



});

function ArrMap(start, count) {
    if(arguments.length == 1) {
        count = start;
        start = 0;
    }

    var foo = [];
    for (var i = 0; i < count; i++) {
        foo.push(start + i);
    }
    return foo;
}


function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

Answer 1

所以发生了什么：当你引用$('.random_menu').children().eq(v)时，它指的是DOM中的实际元素。因此，如果您将该元素附加到其他位置（在本例中为＆＃39; .random_menu＆＃39;），则会将其从当前位置删除并将其附加到新位置。这样做的副作用是你的数组的大小缩小了一个，而你随机化的索引会变得很糟糕。

为了避免这种情况，您可以简单地克隆原始数组，如下所示：

var original = $('.random_menu').children().clone();
var sizeofmenu = original.length;
var myArr = new shuffle(ArrMap(0,sizeofmenu));

var newmenu = $('.new_menu');
$(myArr).each(function(i,v) { 
  newmenu.append(original.eq(v));
});

小提琴：http://jsfiddle.net/t1dukhwz/58/

Answer 2

我刚刚调整了Fiddle更改

newmenu.append($('.random_menu').children().eq(v));

到

newmenu.append($('.random_menu').children().eq(v).clone());

Answer 3

以下代码示例正在按预期工作保留缓存

更新代码链接 http://jsfiddle.net/bibumathew/t1dukhwz/55 {代码}

var cacheMenu = $（'。random_menu'）。html（）;

var cacheMenu = $('.random_menu').html();

{/代码}

jquery append无法正常工作

3 个答案: