按索引将数组对象/元素向上或向下移动

Question

按索引将数组对象/元素向上或向下移动

5

我有一个值列表，包含上下按钮。如果我想要点击上按钮，该元素将会向上移动到列表中前一个值的位置，如果我点击下按钮，该元素将会向下移动到列表中下一个值的位置。这是我的示例代码：

<ul>
  <li> 1 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 2 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 3 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 4 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 5 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
</ul>

<script type="text/javascript">
function moveUp(element) {
  if(element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);
}
function moveDown(element) {
  if(element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);
}
document.querySelector('ul').addEventListener('click', function(e) {
  if(e.target.className === 'down') moveDown(e.target.parentNode);
  else if(e.target.className === 'up') moveUp(e.target.parentNode);
});
    </script>

这是一个包含值列表的代码，但我希望以这种方式显示数组值，该方式基于索引执行上下函数。我的数组元素是：

[
    { id: "Racer-101", rank: "1"},
    { id: "Racer-102", rank: "2"},
    { id: "Racer-103", rank: "3"},
    { id: "Racer-104", rank: "4"},
    { id: "Racer-105", rank: "5"},
    { id: "Racer-106", rank: "6"},
    { id: "Racer-107", rank: "7"},
    { id: "Racer-108", rank: "8"},
    { id: "Racer-109", rank: "9"}
]

如何使用数组值实现这一点...

- Stella-007

你不应该在问题中更新答案的代码，这会让人感到困惑。但是，无论如何，在你的代码中我没有看到任何将 moveUp() 和 moveDown() 函数与按钮绑定的内容。 - cнŝdk

我将更新我的第一个编码，我的主要问题是如何在表格中显示这个数组的值。如何使用此函数定义表格中的数组值，此上下函数在单击时执行。 - Stella-007

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cнŝdk · Accepted Answer

如果您想对您的array执行相同的操作，您只需要检查给定的element是否有previous或next元素，这样您就可以交换两个对象以避免an index out of bound。

这是您的代码应该是这样的：

function moveUp(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index > 0) {
    let el = arr[index];
    arr[index] = arr[index - 1];
    arr[index - 1] = el;
  }
}

为了将数组中的一个元素向上移动，您需要确保此元素不是数组中的第一个元素，然后执行交换操作。

function moveDown(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index !== -1 && index < arr.length - 1) {
    let el = arr[index];
    arr[index] = arr[index + 1];
    arr[index + 1] = el;
  }
}

要将一个元素向下移动，您需要确保该数组中的元素不是最后一个。

演示：

这是一个有效的演示样例：

var arr = [
    { id: "Racer-101", rank: "1"},
    { id: "Racer-102", rank: "2"},
    { id: "Racer-103", rank: "3"},
    { id: "Racer-104", rank: "4"},
    { id: "Racer-105", rank: "5"},
    { id: "Racer-106", rank: "6"},
    { id: "Racer-107", rank: "7"},
    { id: "Racer-108", rank: "8"},
    { id: "Racer-109", rank: "9"}
];

function moveUp(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index > 0) {
    let el = arr[index];
    arr[index] = arr[index - 1];
    arr[index - 1] = el;
  }
}

function moveDown(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index !== -1 && index < arr.length - 1) {
    let el = arr[index];
    arr[index] = arr[index + 1];
    arr[index + 1] = el;
  }
}
moveDown("Racer-101");
moveUp("Racer-103");
console.log(arr);