如何在 forEach 调用 JavaScript 中重新排序元素 [重复]

Posted 2023-02-21

【中文标题】如何在 forEach 调用 JavaScript 中重新排序元素 [重复]

【英文标题】：How to re-order elements in a forEach call JavaScript [duplicate]

【发布时间】：2022-01-12 02:42:30

【问题描述】：

我有一个包含 3 段和一个按钮的 html 页面。在我的 javascript 文件中，我创建了一个函数，每次点击按钮时都会向页面添加 3 个新段落。这 3 个新段落应该是现有段落的副本，但每次都以随机顺序添加。 这是我的功能

const body = document.querySelector("#body");
const paragraphs = document.querySelector(".paragraph");
const btnHitMe = document.querySelector("#btn");

const addParagraphs = () => 
  
  Array.prototype.forEach.call(paragraphs, (el) => 
    
    const node = document.createElement("P");
    node.innerHTML = el.innerHTML;

    body.insertBefore(node, btnHitMe);

  );

以上代码成功添加了段落。 我的问题是如何在每次点击按钮时以随机顺序添加这些段落？

【参考方案1】：

首先，querySelector 确实只返回第一个被选中的元素。

请改用querySelectorAll。

---

其次，选择one of shuffle algorithms mentioned in another post，然后在循环之前用它洗牌paragraphs。

---

const paragraphs = document.querySelectorAll(".paragraph"); // <- here
// .... 
  // shuffle function should be added from: https://***.com/a/2450976/747579
  let randomizedParagraphs = shuffle(Array.prototype.slice.call(paragraphs)) // <-- here
  Array.prototype.forEach.call(randomizedParagraphs, (el) =>  // <- here
//....