有没有办法根据按钮的内容在 DOM 中将 "div" 元素重新排序为降序？

Question

我正在尝试通过单击按钮重新排序“divs”（通过 Javascript 推入 DOM）。具体来说，我正在寻找一个 Javascript 函数来进入并比较“divs”的内容，并将弹性项目重新排序为降序。任何解决方案表示赞赏。谢谢。

let orderBtn = document.getElementById("order")
let addBtn = document.getElementById("add-btn")
const container = document.getElementById("container")

let numArr = []
let numInc = 0

let child = document.getElementsByClassName(`child${numInc}`)

// a function to increment the numInc variable each time the addBtn is clicked and pushes that value to an array
addBtn.addEventListener("click",() => {
  numInc = numInc+1;
  numArr.push(numInc);
  console.log(numArr);

  container.innerHTML += `<div class="child${numInc} child" >${numInc}</div>`;
  console.log(`child${numInc}`)
})

// a function to order the numArr array in descending value and console.log out the result
orderBtn.addEventListener("click",()=>{
  numArr.sort(function(a, b){return b-a});
  console.log(numArr)
  console.log(`child${numInc}`)              
})

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: hsl(0,100%,80%);

}

.child {
    padding: 10px; 
    background: hsl(180,100%,70%); 
    border: solid black 3px; 
    margin: 10px;
    width: 3em;
    text-align: center;
}

<button id="order">Order Button</button>
<button id="add-btn">Add</button>
<div id="container"></div>

Answer 1

如果您只想颠倒项目的顺序，有两种方法可以实现：使用 column-reverse CSS 值，或将元素重新插入 DOM.

CSS column-reverse

您在代码中使用的 flex-direction CSS 属性可以取一个名为 column-reverse 的值。这将在一列中显示元素，但顺序相反。

因此，您的 onclick 所要做的就是将 class 附加到父级 div，从而更改 flex-direction.

orderBtn.addEventListener("click",() => {
    container.classList.add("reversed") 
})

let orderBtn = document.getElementById("order")
let addBtn = document.getElementById("add-btn")
const container = document.getElementById("container")

let numArr = []
let numInc = 0

let child = document.getElementsByClassName(`child${numInc}`)

// a function to increment the numInc variable each time the addBtn is clicked and pushes that value to an array
addBtn.addEventListener("click",() => {
  numInc = numInc+1;
  numArr.push(numInc);

  container.innerHTML += `<div class="child${numInc} child" >${numInc}</div>`;
})

// a function to order the numArr array in descending value and console.log out the result
orderBtn.addEventListener("click",() => {
  container.classList.add("reversed") 
})

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: hsl(0,100%,80%);
}

#container.reversed {
    flex-direction: column-reverse;
}

.child {
    padding: 10px; 
    background: hsl(180,100%,70%); 
    border: solid black 3px; 
    margin: 10px;
    width: 3em;
    text-align: center;
}

<button id="order">Order Button</button>
<button id="add-btn">Add</button>
<div id="container"></div>

重新插入元素

如果你真的想在物理上对元素重新排序，那么你必须按照你想要的顺序将它们 re-insert 放入 DOM；反转数组是不够的。

此方法更灵活，这意味着您可以按任何顺序放置元素（例如，按价格排序），而 column-reverse 方法严格颠倒顺序。

orderBtn.addEventListener("click",() => {
    const reversed = Array.from(container.children).reverse();
    container.append(...reversed);
})

let orderBtn = document.getElementById("order")
let addBtn = document.getElementById("add-btn")
const container = document.getElementById("container")

let numArr = []
let numInc = 0

let child = document.getElementsByClassName(`child${numInc}`)

// a function to increment the numInc variable each time the addBtn is clicked and pushes that value to an array
addBtn.addEventListener("click",() => {
  numInc = numInc+1;
  numArr.push(numInc);

  container.innerHTML += `<div class="child${numInc} child" >${numInc}</div>`;
})

// a function to order the numArr array in descending value and console.log out the result
orderBtn.addEventListener("click",() => {
  const reversed = Array.from(container.children).reverse();
  container.append(...reversed);
})

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: hsl(0,100%,80%);
}

.child {
    padding: 10px; 
    background: hsl(180,100%,70%); 
    border: solid black 3px; 
    margin: 10px;
    width: 3em;
    text-align: center;
}

<button id="order">Order Button</button>
<button id="add-btn">Add</button>
<div id="container"></div>

有没有办法根据按钮的内容在 DOM 中将 "div" 元素重新排序为降序？

Is there a way to reorder "div" elements ,into a descending order, in the DOM according to their content with the onclick of a button?

html

javascript

css

jquery

dom

CSS column-reverse

重新插入元素