JavaScript：在列表中上下移动元素答案

【问题标题】：JavaScript: Move elements up and down in the listJavaScript：在列表中上下移动元素
【发布时间】：2019-04-09 20:19:55
【问题描述】：

我正在编写一个脚本，通过单击按钮来上下移动列表元素。

我可以让它与 jQuery 一起工作，但我在用纯（香草）JavaScript 编写它时遇到了麻烦。

$(function() {
  $('.up').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertBefore(wrapper.prev())
  })
  $('.down').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertAfter(wrapper.next())
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>

我怎样才能在纯 JavaScript 中做同样的事情？

【问题讨论】：

使用“plain javascript”是指没有 jQuery 吗？
是的，没有 jQuery。

标签： javascript jquery html

【解决方案1】：

希望这会有所帮助：

window.onload = function () {
	var upLink = document.querySelectorAll(".up");

	for (var i = 0; i < upLink.length; i++) {
		upLink[i].addEventListener('click', function () {
			var wrapper = this.parentElement;

			if (wrapper.previousElementSibling)
			    wrapper.parentNode.insertBefore(wrapper, wrapper.previousElementSibling);
		});
	}

	var downLink = document.querySelectorAll(".down");

	for (var i = 0; i < downLink.length; i++) {
		downLink[i].addEventListener('click', function () {
			var wrapper = this.parentElement;

			if (wrapper.nextElementSibling)
			    wrapper.parentNode.insertBefore(wrapper.nextElementSibling, wrapper);
		});
	}
}

<ul>
	<li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>

【讨论】：

【解决方案2】：

你可以使用下面的代码

`function listbox_move(listID, direction) {

var listbox = document.getElementById(listID);
var selIndex = listbox.selectedIndex;

if(-1 == selIndex) {
    alert("Please select an option to move.");
    return;
}

var increment = -1;
if(direction == 'up')
    increment = -1;
else
    increment = 1;

if((selIndex + increment) < 0 ||
    (selIndex + increment) > (listbox.options.length-1)) {
    return;
}

var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
listbox.options[selIndex].value = listbox.options[selIndex + increment].value
listbox.options[selIndex].text = listbox.options[selIndex + increment].text

listbox.options[selIndex + increment].value = selValue;
listbox.options[selIndex + increment].text = selText;

listbox.selectedIndex = selIndex + increment;

参考Example

【讨论】：

问题是关于向上/向下移动li 元素。