html - Use jquery to crop a list and hide and show random list elements with a set maxium? -

i have <ul> on 6 <li> elements. want show 6 @ time. trick need randomly select elements hide, , stagger hide/show.

for example current markup :

<ul> <li>1<li> <li>2<li> <li>3<li> <li>4<li> <li>5<li> <li>6<li> <li>7<li> <li>8<li> <li>9<li> </ul> 

is possible use jquery hide/show elements provide random this:

<ul>     <li style="display:none">1<li>     <li>2<li>     <li style="display:none">3<li>     <li>4<li>     <li>5<li>     <li>6<li>     <li>7<li>     <li style="display:none">8<li>     <li>9<li>  </ul> 

you should try things before posting questions here, include code have tried show have tried. however, simple, i'll answer question.

---

expanding on this answer question generating random numbers in javascript, can use while() loop generate random number between 0 , number of elements minus 6.

we don't want hide same element twice, have check if element same index random number hidden.

• if visible, hide , reduce number of further iterations 1
• if hidden, nothing , start new iteration.

(demo)

var items = document.queryselectorall("#random li"), index, i; var min = 0; var max = items.length - 1; var count = items.length - 6;  while(count > 0) {     index = math.floor(math.random() * (max - min + 1)) + min;     if(items[index].style.display != "none") {         items[index].style.display = "none";         --count;     } } 

---

code correction:

you should use closing tags end html elements.

<li>2<li> 

should be

<li>2</li>