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

我正在制作一个脚本，通过单击按钮来上下移动列表元素。JavaScript：在列表中上下移动元素

我可以使它与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？

来源

2017-10-13 John Doe

“plain javascript”的意思是没有jQuery？ –

是的，没有jQuery。 –

@JohnDoe希望我的解决方案是你正在寻找的。 –

希望这有助于：

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

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

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

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

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

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

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

来源

2017-10-13 07:49:34

谢谢，作品完美！ –

您可以使用此代码如下

`函数listbox_move（listID，方向）{

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;

Refrerence Example

来源

2017-10-13 07:33:53 Jinesh

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

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

回答

相关问题