jquery append无法正常工作

问题描述：

我试图从一个已经存在的选择创建一个随机选择，但它不像预期的那样工作。jquery append无法正常工作

它移除原始元素某种原因，我很困惑，为什么

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

答

所以发生了什么事是：当你引用$('.random_menu').children().eq(v)它指的是在DOM实际元素。因此，如果您将该元素附加到其他位置（在本例中为'.random_menu'），则将其从当前位置移除并附加到新位置。这样做的副作用是数组的大小缩小一个，并且你随机化的索引被吹到地狱。

为了避免这种情况，你可以简单地复制原始数组，像这样：

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/

答

我刚刚调整您的Fiddle改变

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

到

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

答

的follwing代码示例工作作为expceted 保持高速缓存

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

变种cacheMenu = $（ 'random_menu。'）HTML（）;

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

{/代码}

jquery append无法正常工作

相关推荐