有沒有辦法通過單擊按鈕根據內容在DOM中將“div”元素重新排序為降序？

我正在嘗試通過單擊按鈕重新排序“div”（通過 Javascript 推入 DOM）。具體來說，我正在尋找一個 Javascript 函式來訪問并比較“div”的內容并將彈性專案重新排序為降序。任何解決方案表示贊賞。謝謝你。

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 hljs-subst">${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>

uj5u.com熱心網友回復：

如果您只想顛倒專案的順序，有兩種方法可以做到這一點：使用column-reverseCSS 值，或將元素重新插入 DOM。

CSS 列反向

正如您在代碼中使用的那樣，flex-direction CSS 屬性可以采用一個名為column-reverse. 這將顯示列中的元素，但順序相反。

因此，您的 onclick 所要做的就是將一個類附加到更改 flex-direction 的父 div。

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 hljs-subst">${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>

重新插入元素

如果您想實際對元素重新排序，則必須按照您想要的順序將它們重新插入 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 hljs-subst">${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>

標籤：javascript html jQuery css dom

上一篇：在資料表中進行過濾時更新總和

下一篇：如何為DjangoRestFrameWork中具有兩個ManyToManyFields的模型撰寫__str__方法的測驗用例？