previousSibling在控制檯中顯示兩種不同的東西

我正在嘗試使用一個按鈕來將一個li移動到列表中。我正在使用控制檯來跟蹤某些變量，以查看我的代碼是否正常工作。我在觀看控制檯時發現了一些非常好奇的事情。previousSibling在控制檯中顯示兩種不同的東西

當我點擊列表中項目的向上箭頭時，變量itemBefore在控制檯中顯示「#text」（object）。此外，列表項不會像它應該的那樣移動。它保持不變。

現在我再次單擊相同列表項上的按鈕，控制檯將顯示一個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/

來源

2015-10-02 John Coolidge

你」重新捕獲空白。如果您修改標記以將其刪除，例如

<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;

來源

2015-10-02 17:11:18

如何跳過代碼中的空格？考慮一下，我可以運行一個while循環，只要變量是「空白」做另一個兄弟查找。但是，我如何在JavaScript中表示空白？ –

@JohnCoolidge你可以簡單的監視文本節點，沿着這條線： 'while（itemBefore.nodeName =='#text'）itemBefore = itemBefore.previousSibling;'在這裏測試：https：//jsfiddle.net/09yyfxae/ 3/ –

完美！非常感謝！ :) –

這是因爲您的關閉</li>和下一個開放<li>標籤之間的空格會創建文本節點（因此第一個調試輸出的內容爲#text）。

因此，第一次點擊時，您將在前面的文本節點之前移動li - 只有在下一次點擊時，纔會在下一個點擊之前將其移動到下一個li之前。

https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

來源

2015-10-02 17:11:19 CBroe

啊，在瀏覽MDN上的previousSibling註釋後，它就是這樣說的。他們使用的例子在下一行沒有兄弟，因此沒有空白。有沒有像以前的兄弟姐妹一樣忽略空白空間的屬性，還是我只是遇到了一些混亂的HTML？ –

previousSibling在控制檯中顯示兩種不同的東西

回答

相關問題