JavaScript getElementsByClassName：替换随机数为10的10，然后随机播放

问题描述

我有：

<div class="parent">
  <div class="myItem">Item 1</div>
  <div class="myItem">Item 2</div>
  <div class="myItem">Item 3</div>
  <div class="myItem">Item ...</div>
  <div class="myItem">Item 10</div>
</div>

我想要：

<div class="parent">
  <div class="myItem">Item 7</div>
  <div class="myItem">Item 4</div>
  <div class="myItem">Item 5</div>
  <div class="myItem">Item 9</div>
  <div class="myItem">Item 2</div>
</div>

我想替换一定数量的物品（例如10个中的5个）。替换后的物品应按新的随机顺序排列。在纯JavaScript中。最好的方法是什么？

解决方法

一种有效的解决方案，不需要.getElementsByClassName，而只需在.parent元素上使用（它是children属性）：

function scrambleChilds(parentEl,childCount) {
  var childs = Array.from(parentEl.children),// get all children
      random = [],// new children
      index;
      
  while (childs.length) { // while there are children...
    index = Math.floor(Math.random() * childs.length); // ... make a random index ...
    random.push(childs.splice(index,1)[0]); // ... and save a random child into the new children
  }
  
  parentEl.innerHTML = ''; // make sure parent element is empty
  random.slice(0,childCount || Infinity).forEach(child => { // grab first N and...
    parentEl.appendChild(child); // ...append each to parent
  });
}



scrambleChilds(document.querySelector('.parent'),5);

<div class="parent">
  <div class="myItem">Item 1</div>
  <div class="myItem">Item 2</div>
  <div class="myItem">Item 3</div>
  <div class="myItem">Item 4</div>
  <div class="myItem">Item 5</div>
  <div class="myItem">Item 6</div>
  <div class="myItem">Item 7</div>
  <div class="myItem">Item 8</div>
  <div class="myItem">Item 9</div>
  <div class="myItem">Item 10</div>
</div>

,

我希望这会有所帮助：

const shuffleArray = array => {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i],array[j]] = [array[j],array[i]];
    }
  
  return array;
}


const [parent] = document.getElementsByClassName('parent');
const items = [...document.getElementsByClassName('myItem')];
const shuffledArray = shuffleArray(items);

parent.innerHTML = '';
const elementsAmount = 5; 

for(let i = 0; i < elementsAmount; i++){
  parent.appendChild(shuffledArray[i]);
}

<div class="parent">
  <div class="myItem">Item 1</div>
  <div class="myItem">Item 2</div>
  <div class="myItem">Item 3</div>
  <div class="myItem">Item 4</div>
  <div class="myItem">Item 5</div>
  <div class="myItem">Item 6</div>
  <div class="myItem">Item 7</div>
  <div class="myItem">Item 8</div>
  <div class="myItem">Item 9</div>
  <div class="myItem">Item 10</div>
</div>