Javascript проблема с перемещением элементов списка вверх и вниз

Question

Javascript проблема с перемещением элементов списка вверх и вниз

1

Недавно я начал изучать javascript и на данный момент пытаюсь создать простое приложение, то есть ul, с элементами списка, где у каждого 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/

Может кто-нибудь объяснить мне, почему это не работает в этих двух случаях? Что я сделал не так?

bawsi 30 июнь 2017, в 18:00

Источник

Теги:

javascript

events

1 ответ

Ещё вопросы

nnnnnn · Accepted Answer · 2017-06-30T13-17-00.000Z

Если вы проверите консоль браузера (F12, чтобы открыть Dev Tools в большинстве браузеров), вы увидите такую ошибку:

Uncaught TypeError: Cannot read property 'nextElementSibling' of null

Это потому, что на этой линии:

li.nextElementSibling.nextElementSibling;

... последний элемент .nextSibling имеет значение null (у него нет следующего брата). Вам нужно проверить значение null а не просто .nextElementSibling дополнительный .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() перемещает элемент (не копирует его).

Обратите внимание, что это приводит к Move Up в верхнем ряду.
@Paulpro - Это случилось и с оригинальным кодом ОП. Я не был уверен, было ли это специально.
Кроме того, в вашем ответе нет ничего плохого, но у меня есть несколько случайных рекомендаций для ОП, которые можно добавить к нему, если хотите. 1) Вызовы removeChild могут быть удалены, так как они не имеют никакого эффекта, так как за ними всегда следует insertBefore который перемещает узел li из insertBefore места в DOM. 2) const имеет больше смысла, чем let для всех этих переменных (и использовать по умолчанию, когда это возможно), let подразумевает, что они могут быть изменены позже.
@Paulpro - На самом деле я просто редактировал, чтобы удалить .removeChild() с примечанием об этом. Я согласен с const против let , но это больше относится к общему стилю, поэтому я думаю, что вашего комментария достаточно, а не помещать его в ответ.
Спасибо за ваши ответы, ребята. Быстрый вопрос: почему const? Значения для clicked, li next и prev устанавливаются при каждом нажатии любой из кнопок. Если я использую const вместо let, разве эти значения всегда остаются неизменными?
Каждый раз, когда вызывается функция, она получает новый набор локальных переменных, которые не сохраняются между вызовами. В коде моего ответа next переменная может быть переназначена в операторе if поэтому она не может быть const , но другие переменные могут быть.