Select maxium 5 li items with jquery

Question

I have a <ul> with a lot of <li> You can see this here:

<ul>
                        <li><img src="content/img/logos/pon.jpg" alt="PON" width="111" height="63" /></li>
                        <li><img src="content/img/logos/spo.png" alt="SPO Utrecht" width="130" height="67" /></li>
                        <li><img src="content/img/logos/campus.jpg" alt="Onderwijs Campus" width="137" height="86" /></li>
                        <li><img src="content/img/logos/cpwb.png" alt="CPWB" width="112" height="99"/></li>
                        <li><img src="content/img/logos/expertis.jpg" alt="Expertis" width="120" height="56" /></li>
                        <li><img src="content/img/logos/inos.jpg" alt="Inos" width="211" height="67" /></li>
                        <li><img src="content/img/logos/OSG.jpg" alt="OSG" width="130" height="51" /></li>
                        <li><img src="content/img/logos/pio.png" alt="Pio" width="138" height="92" /></li>
                        <li><img src="content/img/logos/Signum.png" alt="Signum" width="181" height="68" /></li>
                        <li><img src="content/img/logos/vgs.png" alt="VGS" width="192" height="63" /></li>
                    </ul>

But no my question. The li items have his own <img> tag. But i want make, that jquery show me 5 li items. How can i make with javascript / jquery. That he show me random 5 of this li items?

Thanks

score 3 · Accepted Answer · edited May 23 '17 at 11:55

3

randomElements = jQuery("li").get().sort(function(){ 
  return Math.round(Math.random())-0.5
}).slice(0,5)

Found in jQuery: select random elements.

As for the question posed by OP in the comments:

var $allLi = $('ul li'), // All
    showRandom = function() {
        $allLi.hide().sort(function() { // Hide all, then sort
            return Math.round(Math.random()) - 0.5;
        }).slice(0, 5).show(); // Show first five after randomizing
    };

showRandom(); // Do it now ...
setInterval(showRandom, 1500); // ... and every 1.5 sec

(Demo)

edited May 23 '17 at 11:55

Community

1
1

answered Jan 21 '11 at 07:42

jensgram

31,109
6
81
98

You can remove the `.get()` if you want the `jQuery` object back, not a collection of `DOMElement` s. [Demo](http://jsfiddle.net/jensgram/6qY37/) – jensgram Jan 21 '11 at 07:56
But how can i make. That he now rotate. That he every 10 sec show other li – Mike Jan 21 '11 at 08:10
@Mike Well that's another question, but I'd say that every then seconds you hide all (`$('li', container).hide()`) and then show five random (`$('li', container).sort(function() { return Math.round(Math.random()) - 0.5; }).slice(0, 5).show()`). – jensgram Jan 21 '11 at 10:54

score 0 · Answer 2 · answered Jan 21 '11 at 07:45

When you are able to reference the li's, you'll be able to iterate it's children. Which are the li's. Example:

   $('li').each(function(index) {
    alert(index + ': ' + $(this).text());
  });

In the example above, you can reference to the li's with $(this). What you could do is store them in an array and fetch 5 randomly. You could do this using the Math.random method. Either rebuild the ul li list afterwards or remove the unwanted items with jQuery.

score 0 · Answer 3 · answered Jan 21 '11 at 07:48

0

var li = $('ul li');
var len =li.length;

while($('ul li:visible').length > 5) {
    li.eq(parseInt(len * Math.random())).hide();
}

demo

answered Jan 21 '11 at 07:48

Reigel Gallarde

64,198
21
121
139

Select maxium 5 li items with jquery

3 Answers3

demo