Не получается поменять местами обьекты в массиве

Question

Есть список из трех элементов 'li'. При нажатии на кнопку нужно поменять родительский элемент списка с соседним. Так же информация о положении элементов 'li' обновляется в массиве lists(для дальнейшего сохранения в локальное хранилище). Но почему-то в массиве замена не работает. После нажатия кнопки Up,Down alert выводит обновленное содержимое массива lists.

const divUpButton = document.querySelectorAll('button');
divUpButton.forEach(element => {
  if (element.innerText === 'Up') {
    element.addEventListener('click', RaiseItem);
  } else {
    element.addEventListener('click', DropItem);
  }
});

let lists = [
  {idListItem: 1, name: 'New task1'},
  {idListItem: 2, name: 'New task2'},
  {idListItem: 3, name: 'New task3'},
];

function DropItem() {
  let ListItem = this.parentNode;
  let Neighbor = ListItem.nextElementSibling;
  if (Neighbor && Neighbor.className == 'li') {
    Neighbor.after(ListItem);
    for (let item of lists) {
      if (item.idListItem == ListItem.id) {
        let third = item;
        item = lists[lists.indexOf(item) + 1];
        lists[lists.indexOf(third) + 1] = third;
        alert(JSON.stringify(lists));
        break;
      }
    }
  }
}

function RaiseItem() {
  let ListItem = this.parentNode;
  let Neighbor = ListItem.previousElementSibling;
  if (Neighbor && Neighbor.className == 'li') {
    Neighbor.before(ListItem);
    for (let item of lists) {
      if (item.idListItem == ListItem.id) {
        let third = item;
        item = lists[lists.indexOf(item) - 1];
        lists[lists.indexOf(third) - 1] = third;
        alert(JSON.stringify(lists));
        break;
      }
    }
  }
}

<li class="li" id="1">
  <label>New task1</label>
  <button>Up</button>
  <button>Down</button>
</li>
<li class="li" id="2">
  <label>New task2</label>
  <button>Up</button>
  <button>Down</button>
</li>
<li class="li" id="3">
  <label>New task3</label>
  <button>Up</button>
  <button>Down</button>
</li>

Answer 1

Я запутался в ваших хитросплетениях, но если нужно поменять местами значения двух переменных, то можете воспользоваться таким синтаксисом:

[lists[0], lists[1]] = [lists[1], lists[0]];

Вроде разобрался:

const divUpButton = document.querySelectorAll('button');
divUpButton.forEach(element => {
    if (element.innerText==='Up'){element.addEventListener('click', RaiseItem);}
    else{element.addEventListener('click', DropItem);}
});

let lists = [
    {idListItem: 1, name: 'New task1'},
    {idListItem: 2, name: 'New task2'},
    {idListItem: 3, name: 'New task3'},
  ]
function DropItem(){
	let ListItem = this.parentNode;
	let Neighbor = ListItem.nextElementSibling;
	if (Neighbor && Neighbor.className=='li'){
		Neighbor.after(ListItem);
// Находим индекс объекта массива lists, где свойство idListItem совпадает с ListItem.id
	let index = lists.findIndex(el => el.idListItem == ListItem.id);
// Производим деструктурирующее присваивание, меняем со следующим элементом массива
    [lists[index], lists[index*1 + 1]] = [lists[index*1 + 1], lists[index]];
    console.log(lists);
	}
}
function RaiseItem(){
	let ListItem = this.parentNode;
	let Neighbor = ListItem.previousElementSibling;
	if (Neighbor && Neighbor.className=='li'){
		Neighbor.before(ListItem);
		let index = lists.findIndex(el => el.idListItem == ListItem.id);
// Производим деструктурирующее присваивание, меняем с предыдущим элементов массива
    [lists[index], lists[index*1 - 1]] = [lists[index*1 - 1], lists[index]];
    console.log(lists);
	}
}

        <li class="li" id="1">
           <label>New task1</label>
           <button>Up</button>
            <button>Down</button>
        </li>
        <li class="li" id="2">
            <label>New task2</label>
            <button>Up</button>
             <button>Down</button>
         </li>
         <li class="li" id="3">
            <label>New task3</label>
            <button>Up</button>
            <button>Down</button>
         </li>

БЛОГ НА HUSL

Не получается поменять местами обьекты в массиве

Ответы (1 шт):