【问题标题】：Select maxium 5 li items with jquery使用 jquery 选择最大 5 li 项目
【发布时间】：2011-06-12 23:44:12
【问题描述】：

我有一个<ul> 和很多<li> 你可以在这里看到这个：

<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>

但没有我的问题。 li 项有自己的<img> 标签。但我想要做，那个 jquery 给我看 5 li 项目。我如何使用 javascript/jquery 制作。他给我随机展示了 5 个这个 li 项目？

谢谢

【问题讨论】：

标签： javascript jquery arrays select

【解决方案1】：

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

发现于jQuery: select random elements。

关于 OP 在 cmets 中提出的问题：

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)

【讨论】：

如果您想要返回 jQuery 对象，而不是 DOMElement 的集合，您可以删除 .get()。 Demo
但我该怎么做。他现在轮换。他每 10 秒显示其他 li
@Mike 好吧，这是另一个问题，但我想说的是，每隔几秒你就会隐藏所有 ($('li', container).hide())，然后随机显示五个 ($('li', container).sort(function() { return Math.round(Math.random()) - 0.5; }).slice(0, 5).show())。

【解决方案2】：

当您能够引用 li 时，您将能够迭代它的子项。哪个是李氏的。示例：

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

在上面的示例中，您可以使用 $(this) 来引用 li。您可以做的是将它们存储在一个数组中并随机获取 5 个。您可以使用 Math.random 方法执行此操作。之后重建 ul li 列表或使用 jQuery 删除不需要的项目。

【讨论】：

【解决方案3】：

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

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

demo

【讨论】：