Jquery 2随机列表并排显示

Question

我正在构建一个简单的随机 div 显示器。

我想显示来自“特色”ul 的一个随机 li 和来自“其他”ul 的两个随机 li。见下文-

<ul id="featured">
I want to display one from this list
<li>Cat</li>
<li>Dog</li>
</ul>

<p>

<p>
<ul id ="others">
I want to display two from this list
<li>bird</li>
<li>monkey</li>
<li>Otter</li>
<li>Honey badger ( most awesome animal )</li>
</ul>
</p>

我将这段代码用于第一个 ul -

<script type="text/javascript">

this.randomtip = function(){
    var length = $("#featured li").length; // this is where we put the id of the list
    var ran = Math.floor(Math.random()*length) + 1;
    $("#featured li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){   
    randomtip();
});

</script>

还有这个 CSS

#featured, #featured li{
    margin:0;
    padding:0;
    list-style:none;
    }
#featured{
    width:250px;
    font-size:16px;
    line-height:120%;
    float:left;
    }
#featured li{
    padding:20px;
    width: 500px;
    display:none; /* hide the items at first only to display one with javascript */
    }

但我无法让它与第二个选项一起使用。任何意见，将不胜感激。

Answer 1

在jQuery :random filter 的帮助下，您可以非常轻松地做到以下几点：

jQuery

$('#featured > li, #others > li').hide();
$('#featured > li:random').show();

var i = 2;
while (i--) $('#others > li:hidden:random').show();    

小提琴： http://jsfiddle.net/Y7cLr/2