随机div，只显示其中的一部分(Random divs, display only part of them)

随机div，只显示其中的一部分(Random divs, display only part of them)

我在我的网站上使用此代码来随机化div的顺序。 在我的一个子页面中，我想在稍微修改的版本中使用它 - 将会有12个div以随机顺序再次显示，但只会显示前3个，其余的将设置为“display：none;” 或使用js的类似效果。

有任何建议如何修改以下代码，以便只出现3个第一个div？

这是代码： http ： //jsfiddle.net/ca7WW/

HTML：

<div class="randomize"> <div class="random_div">1</div> <div class="random_div">2</div> <div class="random_div">3</div> <div class="random_div">4</div> <div class="random_div">5</div> <div class="random_div">6</div> <div class="random_div">7</div> <div class="random_div">8</div> <div class="random_div">9</div> <div class="random_div">10</div> <div class="random_div">11</div> <div class="random_div">12</div> </div>

jQuery的：

function shuffle(array) { var currentIndex = array.length , temporaryValue , randomIndex ; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } (function ($) { $.fn.randomize = function (childElem) { return this.each(function () { var $this = $(this); var elems = shuffle($(childElem)); $this.remove(childElem); for (var i = 0; i < elems.length; i++) $this.append(elems[i]); }); } })(jQuery) jQuery(function($){ $("div.randomize").randomize("div.random_div"); });

I use this code on my website to randomize the order of divs. On one of my subpages I want to use it in slightly modified version - there will be 12 divs displayed in random order again but only the first 3 will be displayed, the rest will be set to "display:none;" or similiar effect using js.

Any suggestions how to modify the following code, so that only 3 first divs will appear?

Here is the code: http://jsfiddle.net/ca7WW/

HTML:

<div class="randomize"> <div class="random_div">1</div> <div class="random_div">2</div> <div class="random_div">3</div> <div class="random_div">4</div> <div class="random_div">5</div> <div class="random_div">6</div> <div class="random_div">7</div> <div class="random_div">8</div> <div class="random_div">9</div> <div class="random_div">10</div> <div class="random_div">11</div> <div class="random_div">12</div> </div>

jQuery:

function shuffle(array) { var currentIndex = array.length , temporaryValue , randomIndex ; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } (function ($) { $.fn.randomize = function (childElem) { return this.each(function () { var $this = $(this); var elems = shuffle($(childElem)); $this.remove(childElem); for (var i = 0; i < elems.length; i++) $this.append(elems[i]); }); } })(jQuery) jQuery(function($){ $("div.randomize").randomize("div.random_div"); });

最满意答案

使用:lt和:gt来获取选择器中的“前N”或“后N”元素。

DEMO

jQuery(function($){ $("div.randomize").randomize("div.random_div"); $(".random_div:gt(2)").hide(); // This hides anything after the 3rd element });

Use :lt and :gt to get the "first N" or the "last N" elements in your selector.

DEMO

jQuery(function($){ $("div.randomize").randomize("div.random_div"); $(".random_div:gt(2)").hide(); // This hides anything after the 3rd element });