Tengo una lista HTML con divisiones reorganizables, se pueden mover hacia arriba y hacia abajo, una vez reorganizadas, necesito cambiar la matriz con el mismo orden de los elementos HTML.
HTML:
<div id="List"> <div id="listUnit2" class="row"> <div class="text-center" style="width:50px;"> <p>Orange</p> </div> </div> <div id="listUnit1" class="row"> <div class="text-center" style="width:50px;"> <p>Pear</p> </div> </div> <div id="listUnit0" class="row"> <div class="text-center" style="width:50px;"> <p>Apple</p> </div> </div> </div>Formación:
"listArray": [ { "id": 0, "name": "apple", }, { "id": 1, "name": "pear", }, { "id": 2, "name": "orange", }, ] ¿Cómo puedo obtener este resultado usando el valor de id como referencia?
"listArray": [ { "id": 2, "name": "orange", }, { "id": 1, "name": "pear", }, { "id": 0, "name": "apple", }, ]Lo intenté:
var unitsRows = document.querySelectorAll("#list .row"); var newList = []; for (var row of unitsRows) { var rowId = row.id rowId = rowId.replace('listUnit', ""); var newEl = listArray[rowId]; newList.push(newEl); } listArray = newList;El orden de los objetos cambia pero no es el mismo del HTML después de algunos cambios.
Puedes hacer esto cada vez que cambie.
Tuve que arreglar tu marcado inválido
const listArray = [...document.querySelectorAll("#List .row")] .map(row => ({ id: +row.id.match(/\d+/g), name: row.querySelector('div').textContent.trim() })) console.log(listArray) <div id="List"> <div id="listUnit2" class="row"> <div class="text-center" style="width:50px;"> <p>Orange</p> </div> </div> <div id="listUnit1" class="row"> <div class="text-center" style="width:50px;"> <p>Pear</p> </div> </div> <div id="listUnit0" class="row"> <div class="text-center" style="width:50px;"> <p>Apple</p> </div> </div> </div>1- Tu código html está mal, modifica la estructura.
2- Tienes un elemento con id ='List' , no un elemento con class =list . Y necesitas los hijos de ese div, así que modifica tu selector:
var unitsRows = document.querySelectorAll("#List .row"); 3- Obtenga el texto del elemento p con:
let text = document.querySelectorAll(`#${itm.id} p`)[0].textContent.trim(); var unitsRows = document.querySelectorAll("#List .row"); let newList = []; unitsRows.forEach(itm => { let text = document.querySelectorAll(`#${itm.id} p`)[0].textContent.trim(); newList.push({ id: itm.id.replace('listUnit', ""), text }) }) console.log(newList) <div id="List"> <div id="listUnit2" class="row"> <div class="text-center" style="width:50px;"> <p>Orange</p> </div> </div> <div id="listUnit1" class="row"> <div class="text-center" style="width:50px;"> <p>Pear</p> </div> </div> <div id="listUnit0" class="row"> <div class="text-center" style="width:50px;"> <p>Apple</p> </div> </div> </div>Puede obtener la lista en la interfaz de usuario, luego ordena el listArray en función de ella.
listArray.sort(function (a, b) { return names.indexOf(a.name) - names.indexOf(b.name); });Actualicé su código e imprimí el resultado en la consola. Usted puede comprobarlo:
var listArray = new Array({ "id": 0, "name": "apple", }, { "id": 1, "name": "pear", }, { "id": 2, "name": "orange", }); var unitsRows = document.querySelectorAll(".row p"); var names = []; [].forEach.call(unitsRows, function(item) { names.push(item.innerHTML.toLowerCase()); }); listArray.sort(function (a, b) { return names.indexOf(a.name) - names.indexOf(b.name); }); console.log('Result', listArray); <div id="List"> <div id="listUnit2" class="row"> <div class="text-center" style="width:50px;"> <p>Orange</p> </div> </div> </div> <div id="listUnit1" class="row"> <div class="text-center" style="width:50px;"> <p>Pear</p> </div> </div> </div> </div> <div id="listUnit0" class="row"> <div class="text-center" style="width:50px;"> <p>Apple</p> </div> </div> </div> </div>