Hola a todos. Tengo una pregunta rápida sobre cómo cambiar el orden de los elementos en HTML usando JavaScript . Quiero que los elementos de la lista cambien de posición hacia abajo cada vez que se haga clic en un botón.
Por ejemplo, los elementos comienzan en este orden:
<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>Cuando se hace clic en el botón, deben cambiar a este orden:
<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>He escrito todo el código hasta la parte donde cambia el orden de los elementos. Simplemente no estoy seguro de qué función o método usar, así que ni siquiera sé por dónde empezar cuando se trata de lograr lo que quiero que suceda.
Realmente agradecería si alguien pudiera ayudarme a resolver esto.
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>lastElementChildinsertAdjacentHTML()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>Podrías usar insertAdjacentElement() , con afterbegin en este ejemplo:
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> Los trucos aplicados son que las API que insertan nodos/elementos eliminan el nodo/elemento dado de su lugar anterior, y los métodos getElementsBy...() a menudo producen una NodeList en vivo, que sigue los cambios de la colección original. Así es como el último elemento de la colección de items individuales cambia automáticamente aquí y items[items.length - 1] se refieren a un elemento diferente después de cada clic.
Puede crear una función de cambio usando lastElementChild , removeChild e 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>