JQuery 2 случайные списки отображаются рядом - PullRequest
Новая
       7

JQuery 2 случайные списки отображаются рядом

0 голосов
/ 16 мая 2011

Я строю простой случайный div-дисплей.

Я хочу отобразить один случайный li из "избранных" ul и два из "других" ul см. ниже - 

<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 */
    }

Но я не могу заставить его работать со вторым вариантом. Любой совет будет принят во внимание.

1 Ответ

0 голосов
/ 16 мая 2011

С помощью jQuery: случайный фильтр вы можете очень легко выполнить следующие действия:

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

...