随机播放容器的 DOM 个元素，但不是 javascript 中的所有元素

Question

尝试用特定的 class 名称（div" ).其他 divs（“额外”）应留在原处。

到目前为止，我已经使用了 link

中改进的洗牌算法

我的代码几乎成功了，但“额外”div 附加在堆栈底部，而它应该留在顶部。

let divs       = document.getElementsByClassName("div")
let divsNumber = divs.length;
let divver     = document.getElementsByClassName("divver")[0]

function shuffler() {
  for (var i = divsNumber; i >= 0; i--) {
    if (!divver.children[i].classList.contains("div")) {
      divver.appendChild(divver.children[Math.random() * i | 0]);
    }
  }
}

<div class="divver">
  <div class="extra">  Extra  </div>
  <div class="div">    1  </div>
  <div class="div">    2  </div>
  <div class="div">    3  </div>
  <div class="div">    4  </div>
  <div class="div">    5  </div>
</div>

<button onclick="shuffler()" id="shuffles">Shuffle 'em</button>

非常感谢任何提示。

Answer 1

由于您希望将第一个元素排除在随机播放之外并且元素数组是基于 0 的，因此您可以将 * i | 0] 更改为 * i | 1]

let divs       = document.getElementsByClassName("div")
let divsNumber = divs.length;
let divver     = document.getElementsByClassName("divver")[0]

function shuffler() {
  for (var i = divsNumber; i >= 0; i--) {
    if (!divver.children[i].classList.contains("div")) {
      divver.appendChild(divver.children[Math.random() * i | 1]);
    }
  }
}

<div class="divver">
  <div class="extra">  Extra  </div>
  <div class="div">    1  </div>
  <div class="div">    2  </div>
  <div class="div">    3  </div>
  <div class="div">    4  </div>
  <div class="div">    5  </div>
</div>

<button onclick="shuffler()" id="shuffles">Shuffle 'em</button>

Answer 2

const
  divver      = document.querySelector('div.divver')
, ShuffleDivs = divver.querySelectorAll('div.div') // just select this group
  ;
document.querySelector('button#shuffles').onclick = () =>
  {
  for (let i = ShuffleDivs.length; i >= 0; i--)
    {
    divver.appendChild(ShuffleDivs[Math.random() * i | 0])
    }
  }

<div class="divver">
  <div class="extra">  Extra  </div>
  <div class="div">    1  </div>
  <div class="div">    2  </div>
  <div class="div">    3  </div>
  <div class="div">    4  </div>
  <div class="div">    5  </div>
</div>

<button id="shuffles">Shuffle 'em</button>

随机播放容器的 DOM 个元素，但不是 javascript 中的所有元素

Shuffle a container's DOM elements but not all in javascript

javascript

dom

shuffle