如何在 <div> 中改变元素的顺序？

leoprd 发表于 Dev

豹子

我的问题：

大家好。关于使用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>

特韦玛达尔

在此示例中，您可以使用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]在每次单击后引用不同元素的方式。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。