Question

我每隔n秒使用此代码来重新调整div的元素..有没有办法在每次shuffle中只显示2个元素（例如）？

var parent = $("#shuffle");
var divs = parent.children().slice();

setInterval(function() {
    var clone = divs.slice(); // <-- clone, since splice modifies array
    while (clone.length) {
        parent.append(clone.splice(Math.floor(Math.random() * clone.length), 1)[0]);
    }
}, 2000); // <-- shuffle each 2 seconds

http://jsfiddle.net/yxBhH/1/ 我对Javascript解决方案感兴趣

Answer 1

这是一个简单的解决方案。

在每个间隔上，清除所有元素，然后添加从列表中随机挑选的n个元素。

var populateParent = (function() {
  var parent = $("#shuffle");
  var divs = parent.children().slice();
  return function() {
    parent.empty();
    var clone = divs.slice();
    for (var i = 0; i < 2 && i < divs.length; ++i) {
      parent.append(clone.splice(Math.floor(Math.random() * clone.length), 1)[0]);
    };
  }
})();

populateParent();
setInterval(populateParent, 2000);

http://jsfiddle.net/rv7zpd07/5/

Answer 2

您可以使用其他div CSS规则限制显示的:nth-child个数。例如，如果您只想显示两个，则使用：

.hue:nth-child(n+3) {
    display: none;
}

var parent = $("#shuffle");
var divs = parent.children().slice();

setInterval(function() {
    var clone = divs.slice();
    while (clone.length) {
        parent.append(clone.splice(Math.floor(Math.random() * clone.length), 1)[0]);
    }
}, 2000);

.hue {
    background: #ddd;
    display: block;
}
.hue:nth-child(2n) {
    background: yellow;
    display: block;
}

.hue:nth-child(n+3) {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shuffle">
    <div class="hue">one</div>
    <div class="hue">two</div>
    <div class="hue">three</div>
    <div class="hue">four</div>
</div>

shuffle divs但显示数量有限

2 个答案: