上下移动列表项的 Javascript 问题

Question

最近开始学习 javascript，目前正在尝试构建一个简单的应用程序，即 ul，带有列表项，其中每个 li 有两个按钮，用于将 li 向上或向下移动。

但是，我遇到了问题。列表中的最后一项永远不能上移

    var ul = document.querySelector('ul');
    
    ul.addEventListener('click', (e) => {
    	let clicked = e.target;
    	let li		= clicked.parentNode;
    	let next    = li.nextElementSibling.nextElementSibling;    
     	let prev    = li.previousElementSibling;
        
        if (clicked.className === 'down') {
        	ul.removeChild(li);
            ul.insertBefore(li, next);
        } else if (clicked.className === 'up') {
        	ul.removeChild(li);
        	ul.insertBefore(li, prev);
        }
    });

    <ul>
        <li>item1 <button class="down">Move down</button><button class="up">Move up</button></li>
        <li>item2 <button class="down">Move down</button><button class="up">Move up</button></li>
        <li>item3 <button class="down">Move down</button><button class="up">Move up</button></li>
        <li>item4 <button class="down">Move down</button><button class="up">Move up</button></li>
        <li>item5 <button class="down">Move down</button><button class="up">Move up</button></li>
    </ul>

这是 jsfiddle:https://jsfiddle.net/hu13x8w0/3/

有人可以向我解释一下，为什么它在这两种情况下不起作用？我做错了什么？

Answer 1

如果您检查浏览器的控制台(在大多数浏览器中 F12 打开开发工具)，您将看到如下错误:

Uncaught TypeError: Cannot read property 'nextElementSibling' of null

那是因为在这条线上:

li.nextElementSibling.nextElementSibling;

...最后一个元素的 .nextSibling 是 null(它没有下一个兄弟)。您需要测试 null 而不是仅仅在末尾链接一个额外的 .nextElementSibling:

    var ul = document.querySelector('ul');
    
    ul.addEventListener('click', (e) => {
    	let clicked = e.target;
    	let li		= clicked.parentNode;
    	let next    = li.nextElementSibling;               // <-- Code changed
        if (next != null) next = next.nextElementSibling;  // <-- Code inserted
     	let prev    = li.previousElementSibling;
        
        if (clicked.className === 'down') {
        	ul.insertBefore(li, next);
        } else if (clicked.className === 'up') {
        	ul.insertBefore(li, prev);
        }
    });

    <ul>
        <li>item1 <button class="down">Move down</button><button class="up">Move up</button></li>
        <li>item2 <button class="down">Move down</button><button class="up">Move up</button></li>
        <li>item3 <button class="down">Move down</button><button class="up">Move up</button></li>
        <li>item4 <button class="down">Move down</button><button class="up">Move up</button></li>
        <li>item5 <button class="down">Move down</button><button class="up">Move up</button></li>
    </ul>

请注意，您不需要调用 .removeChild()，因为 .insertBefore() 将移动元素(不是复制它)。