如何在中改變元素的順序？

我的問題：

大家好。關于使用JavaScript更改HTML中元素的順序，我有一個簡短的問題。我希望每次單擊按鈕時串列中的專案都向下移動它們的位置。

例如，元素按以下順序開始：

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>

單擊按鈕時，它們應轉換為以下順序：

<div class="item">Item 5</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

我試過的：

我已經撰寫了所有代碼，直到它更改元素順序的部分。我只是不確定要使用什么功能或方法，所以在嘗試完成我想要發生的事情時，我什至不知道從哪里開始。

如果有人能幫我解決這個問題，我將不勝感激。

我的代碼：

var itemList = document.getElementsByClassName('item-list')
var items = document.getElementsByClassName('item')
var shiftBtns = document.getElementsByClassName('shift-btn')

for (let i = 0; i < shiftBtns.length; i  ) {
    shiftBtns[i].addEventListener('click', shiftItems)
}

function shiftItems(event) {

    // Insert code that shifts the elements here.
    console.log('Wow! The order has changed!')
    
}

<div class="item-list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>
<br>
<button class="shift-btn">Shift Items</button>

uj5u.com熱心網友回復：

1. 使用獲取最后一項lastElementChild
2. 使用將其添加到開頭insertAdjacentHTML()
3. 使用洗掉它remove()

function shiftItems(event) {
    const last = itemList[0].lastElementChild;
    itemList[0].insertAdjacentHTML('afterbegin', last.outerHTML);
    last.remove();
}

var shiftBtns = document.getElementsByClassName('shift-btn');
var itemList = document.getElementsByClassName('item-list');

for (let i = 0; i < shiftBtns.length; i  ) {
    shiftBtns[i].addEventListener('click', shiftItems)
}

function shiftItems(event) {
    const last = itemList[0].lastElementChild;
    itemList[0].insertAdjacentHTML('afterbegin', last.outerHTML);
    last.remove();
}

<div class="item-list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>
<br>
<button class="shift-btn">Shift Items</button>

uj5u.com熱心網友回復：

在此示例中，您可以使用insertAdjacentElement(), with ：afterbegin

var itemList = document.getElementsByClassName('item-list')
var items = document.getElementsByClassName('item')
var shiftBtns = document.getElementsByClassName('shift-btn')

for (let i = 0; i < shiftBtns.length; i  ) {
  shiftBtns[i].addEventListener('click', shiftItems)
}

function shiftItems(event) {
  itemList[0].insertAdjacentElement("afterbegin", items[items.length - 1]);
}

<div class="item-list">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
<br>
<button class="shift-btn">Shift Items</button>

應用的技巧是插入節點/元素的 API 將給定的節點/元素從其舊位置洗掉，并且這些getElementsBy...()方法通常會產生一個 live NodeList，它跟隨原始集合的變化。這就是單個items集合中的最后一個元素在此處自動更改并items[items.length - 1]在每次單擊后參考不同元素的方式。

uj5u.com熱心網友回復：

lastElementChild您可以使用和removeChild來創建移位函式insertBefore。

function shift() {
    const parent = document.getElementsByClassName('item-list')[0];
    const last = parent.lastElementChild;
    parent.removeChild(last);
    parent.insertBefore(last, parent.firstElementChild);
}

const shiftButton = document.getElementsByClassName('shift-btn')[0];
shiftButton.onclick = shift;

<div class="item-list">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
<br>
<button class="shift-btn">Shift Items</button>

標籤：javascript html

上一篇：Vue3-我可以避免在任何地方使用.value嗎？

下一篇：如何在呼叫另一個函式之前執行一個函式