用JS随机排序div元素的列表

Question

我有一个类别，包含200多个新的项目，在主页上我显示了最后20个新的项目。

<div class="container-category">
   <div class="col-3">item 1</div>
   <div class="col-3">item 2</div>
   <div class="col-3">item 3</div>
   <div class="col-3">item 4</div>
   <div class="col-3">item ..n</div>
</div>

如何使<div class="col-3">列表随机出现在Javascript中？

OrderBy = random

Answer 1

对类别进行洗牌的理想方法是通过后端。但如果你不能，我们可以借shuffle functionality here。

使用jQuery get()获取类别div的数组。使用该函数对数组进行洗牌，并使用html()更新内容。

​

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

var categories = shuffle($(".container-category>div").get());
$(".container-category").html(categories);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-category">
  <div class="col-3">item 1</div>
  <div class="col-3">item 2</div>
  <div class="col-3">item 3</div>
  <div class="col-3">item 4</div>
</div>

​

Answer 2

在这里，我展示了埃迪答案的一个变体，它不需要jQuery。The shuffle function

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

我们可以利用这一点为div的孩子洗牌如下：

// Get the DOM object of the parent div
const container = document.querySelector('.container-category');

// Turn container.children, which is an HTMLCollection, into an array
// See https://stackoverflow.com/a/222847 for more on this
const children = [...container.children];

// The shuffle function above mutates the argument, so here we shuffle
// the array of children; note that this is not yet reflected in the DOM
shuffle(children);

// Reinsert the children to the parent according to the new order
for (const child of children) {
    container.appendChild(child);
}

Answer 3

我的第一个想法是对数组项进行洗牌，但是您有答案，我猜它在大数组中运行得更慢。所以我做了另一个解决方案：

​

    function getRandIndex(arrayLen) {
      return Math.floor(Math.random() * arrayLen);
    }
    
    function getRandUniqueIndexes(arrayLen, count) {
      const indexes = [];

      while (indexes.length < count) {
        const randIndex = getRandIndex(arrayLen);

        if (!indexes.includes(randIndex)) {
          indexes.push(randIndex);
        }
 
      }

      return indexes;
    }

    // your array with 200 categories
    const categories = Array(200).fill(1).map((_, ndx) => `category-${ndx}`);
    // array with 20 random unique indexes
    const rand20Indexes = getRandUniqueIndexes(categories.length, 20);

    console.log(rand20Indexes.map(catIndex => categories[catIndex]));

​