javascript - 以随机顺序动态地将div添加到另一个div中

Question

我正在尝试打乱关键字列表并将它们放入文本幻灯片中的各个 div 中。

这是我的脚本:

var keys = ["dancing.", "computers.", "food.", "movies.", "singing.", "hiking.", "math.", "music.", "reading.", "cars.", "laughing.", "animals.", "cupcakes.", "shopping.", "soccer.", "Europe.", "photography.", "volunteering.", "outerspace.", "traveling.", "guitar.", "painting.", "children.", "boats.", "science.", "art.", "cheerleading.", "Einstein.", "teaching.", "politics.", "waterskiing.", "volleyball.", "whittling.", "volleyball.", "running.", "comedy.", "theater.", "Africa."];

keys.sort(function() { return Math.floor(Math.random()*3 -1)});

for(i = 0; i < keys.length; i++) {
    ("<div>" + keys[i] + "</div>").appendTo("slideshow");   
}

function randomize(myArray) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

<小时/>

<td class="align-top">
   <div class="slideshow"></div>
</td>

<小时/>

有什么想法吗？我还认为我没有很好地融合 javascript 和 jQuery。你能帮我清理一下吗？

Answer 1

试试这个:

keys.sort(function() { return Math.random() - 0.5; });

var $slideshow = $(".slideshow");
for(var i = 0; i < keys.length; i++) {
    $slideshow.append("<div>" + keys[i] + "</div>");   
}

演示:http://jsfiddle.net/XpyYX/1/

您的代码不起作用，因为在这一行:

("<div>" + keys[i] + "</div>").appendTo("slideshow");

您在开始 ( 之前遗漏了 $ 或 jQuery，因为您想附加到 ".slideshow “(带有 .)按类选择元素。它的工作方式如下:

$("<div>" + keys[i] + "</div>").appendTo(".slideshow");

...但缓存对幻灯片元素的引用应该更有效。

此外，您的随机排序过于复杂。