Question

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

如何修改以下代码，以便只显示3个第一个div？

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");
});

Answer 1

使用: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
});

Answer 2

首先使用容器ID，以便轻松调用：

<div id="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>

然后添加此javascript：

var divs = document.getElementById('randomize').getElementsByTagName('div');
var nr = 1;
for(var a = 0 ; a < divs.length ; a++){
    if(divs[a].getAttribute('class') == 'random_div'){
        if(nr <= 3){
            divs[a].style.display = 'inherit';
        }else{
            divs[a].style.display = 'block';
        }
        nr = nr + 1;
    }
}

Answer 3

试试这个：jsFiddle

(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]);

                //Show only the first three elements
                if (i <= 2){
                   $(elems[i]).show();
                }else{
                    $(elems[i]).hide();
               }
            }
        });
    }
})(jQuery)

编辑：我同意@kei有更清晰，更灵活的答案。我只想指出，只有在页面加载时将div一次随机化时，才应使用他的解决方案。如果你想多次随机化它们，请确保在随机化之前取消隐藏div，否则它将无法正常工作。例如：

function(){
    $(".random_div").show();//make sure all divs are visible
    $("div.randomize").randomize("div.random_div");
    $(".random_div:gt(2)").hide();
}

随机div，只显示其中的一部分

3 个答案: