使用 javascript 将 CSS 类随机附加到一个列表项答案

【问题标题】：Use javascript to randomly append CSS class to one list item使用 javascript 将 CSS 类随机附加到一个列表项
【发布时间】：2011-01-21 16:52:43
【问题描述】：

嘿，我没有任何代码，因为我不知道该怎么做。我正在寻找使用 jQuery / javascript 将 CSS 类“活动”随机附加到无序列表中的一个列表项，ID 为 ul#sliding_panels。

【问题讨论】：

【解决方案1】：

保持简单。这将检索该列表下的所有列表项：

var items = $("#sliding_panels li");

然后使用Math.random() 选择其中一个。 注意：构造 Math.floor(Math.random() * 10)) 将返回一个介于 0 和 9 之间的整数。

var item = Math.floor(Math.random() * items.length);

您可以在 jQuery 对象上使用数组索引运算符来检索其中一个元素。 注意： set[n] 等价于 set.get(n) 如果 set 是一个 jQuery 对象。

然后您需要将该元素包装在一个 jQuery 对象中并使用 addClass():

$(items[item]).addClass("active");

【讨论】：

【解决方案2】：

请参阅this question 了解如何抓取随机元素。

$("#sliding_panels li").get().sort(function(){ 
  return Math.round(Math.random())-0.5
}).slice(0,1).addClass("active");

感谢duckyflip 的原始答案。

另一种选择是同一问题中提到的:random plugin。

例子：

$("#sliding_panels li:random").addClass("active");

【讨论】：

【解决方案3】：

var elements = $('ul#mylist li');
$ (elements.get (
  Math.round (elements.length*Math.random ()-0.5)
)).addClass ('active');

【讨论】：