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：在列表中上下移動元素

回答

相關問題