javascript - previousSibling 在控制台中显示两个不同的内容

Question

我正在尝试使用按钮将 ul 中的 li 在列表中向上移动。我正在使用控制台跟踪某些变量，以查看我的代码是否正常运行。我在观察控制台时发现了一些非常奇怪的东西。

当我单击列表中某个项目的向上箭头时，变量 itemBefore 在控制台中显示“#text”(对象)。此外，列表项不会像预期的那样移动。它保持原状。

现在，我再次单击同一列表项上的按钮，控制台改为显示 li，并且列表项确​​实向上移动。它对不是第一个的每个列表项执行此操作(因为这将执行 if 语句中的另一个代码子集)。

我想知道为什么完全相同的 onclick 会执行两种不同的操作，以及如何阻止它第一次失败。

<ul id="incomplete-tasks">
    <li>
        <button class="arrow up">&#8593;</button>
        <button class="arrow down">&#8595;</button>
        <label>Item 1</label>
        <input type="text">
        <button class="edit">Edit</button>
        <button class="delete">Delete</button>
    </li>
    <li>
        <button class="arrow up">&#8593;</button>
        <button class="arrow down">&#8595;</button>
        <label>Item 2</label>
        <input type="text">
        <button class="edit">Edit</button>
        <button class="delete">Delete</button>
    </li>
    <li>
        <button class="arrow up">&#8593;</button>
        <button class="arrow down">&#8595;</button>
        <label>Item 3</label>
        <input type="text">
        <button class="edit">Edit</button>
        <button class="delete">Delete</button>
    </li>
</ul>

和 JavaScript:

var moveUp = function() {
    var listItem = this.parentNode;
    var ul = listItem.parentNode;
    var items = ul.getElementsByTagName("li");
    var arr = [].slice.call(items);
    var position = arr.indexOf(listItem);
    console.log(position);
    if (position < 1) {
        var removedChild = ul.removeChild(listItem);
        ul.appendChild(removedChild);
    } else {
        var itemBefore = listItem.previousSibling;
        console.log(itemBefore);
        var removedChild = ul.removeChild(listItem);
        ul.insertBefore(removedChild, itemBefore);
    }
};

如果您想要/需要查看整个代码来演示错误，请链接 jsfiddle:

https://jsfiddle.net/09yyfxae/

Answer 1

您正在捕获空白。如果您编辑标记以将其删除，例如

<ul id="incomplete-tasks"><li>
    <button class="arrow up">&#8593;</button>
    <button class="arrow down">&#8595;</button>
    <label>Item 1</label>
    <input type="text">
    <button class="edit">Edit</button>
    <button class="delete">Delete</button>
</li><li>
    <button class="arrow up">&#8593;</button>
    <button class="arrow down">&#8595;</button>
    <label>Item 2</label>
    <input type="text">
    <button class="edit">Edit</button>
<button class="delete">Delete</button>
</li><li>
    <button class="arrow up">&#8593;</button>
    <button class="arrow down">&#8595;</button>
    <label>Item 3</label>
    <input type="text">
    <button class="edit">Edit</button>
    <button class="delete">Delete</button>
    </li>
</ul>

您每次都会得到正确的项目:https://jsfiddle.net/09yyfxae/1/

或者(最好)如果遇到代码中的空格，则跳过它并执行另一次同级查找，例如:

var itemBefore = listItem.previousSibling;
while (itemBefore.nodeName == '#text') itemBefore = itemBefore.previousSibling;