Javascript 按索引上下移动阵列对象/元素

Javascript 按索引上下移动阵列对象/元素,javascript,jquery,arrays,object,Javascript,Jquery,Arrays,Object,我有一个带有向上和向下按钮的值列表。如果我想单击“向上”按钮,在列表中具有上一个值的元素将向上移动,而我单击“向下”按钮,它们将向下移动到列表中的下一项。我的示例代码在这里 <ul> <li> 1 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li&g

我有一个带有向上和向下按钮的值列表。如果我想单击“向上”按钮,在列表中具有上一个值的元素将向上移动,而我单击“向下”按钮,它们将向下移动到列表中的下一项。我的示例代码在这里

<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>

数组值是如何实现的?

如果要对
数组执行相同的操作,只需检查给定的
元素
是否有
上一个
下一个
元素,这样就可以交换两个对象,以避免
索引越界

这是您的代码应该如何编写的:

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;
  }
}

它工作得很好,但我想在表中显示所有数组值,每行都有向上和向下按钮。基于单击行中的按钮来更改表中的上一个和下一个位置。@NewUSer我没有任何击倒的经验,但您所要做的就是将
id
传递给
moveUp()
moveDown
功能正确。好,如何使用jquery和click函数在表中显示此数组值。是绑定表中数据的任何其他方法。请使用您已经尝试过的相关淘汰代码更新您的问题。通常,如果您从淘汰代码中调用函数,它将动态处理渲染。您不应该用答案中的代码更新问题,这会让人困惑,但无论如何,我看不到
moveUp()
moveDown()的任何绑定
代码中有按钮的函数。我将更新我的第一个编码,我的主要问题是在表中显示此数组值。如何使用此函数定义表中的数组值,此向上和向下函数在单击时执行。
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;
  }
}