Firstchild/lastchild不能在JavaScript中工作

我在想，爲什麼在這種情況下，「firstChild」和「lastChild」不起作用，但是當我通過數組中的位置來做這件事時，一切正常。Firstchild/lastchild不能在JavaScript中工作

這是我的HTML：

<div class="listContainer"> 
    <ul class="list"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</div>

這是我的JS，當它不工作：

for (var i = 0; i < div.length; i++){ 
     div[i].addEventListener("mouseover", function(){ 
     var list = this.firstElementChild; 
     var listLi = list.children; 

     var firstLi = listLi.firstChild; 
     var lastLi = listLi.lastChild; 

     firstLi.style.backgroundColor = "red"; 
     lastLi.style.backgroundColor = "blue"; 
     }); 
};

我試圖做到這一點像這樣，它不工作：

listLi.firstChild.style.backgroundColor = "red"; 
listLi.lastChild.style.backgroundColor = "blue";

但是當我在陣列中的位置做它時，一切正常工作：

listLi[0].style.backgroundColor = "red"; 
listLi[4].style.backgroundColor = "blue";

編輯：它看起來像，當它的工作：https://fiddle.jshell.net/aadfnazk/

來源

2016-04-01 ChickenLeg

u能告訴我們一些撥弄你的代碼？ –

你的意思是*它不工作*？它輸出任何錯誤？ – Lewis

'firstChild'和'lastChild'是一個元素，而不是一個子列表。你不需要'listLi'，直接使用'list.firstChild'即可。 – rgthree

首先，你必須使用firstElementChild和lastElementChild，以便可以選擇一個元素節點，而不是一個文本節點。

其次，請撥打list元素而不是listLi兒童數組。

list.firstElementChild.style.backgroundColor = "red"; 
list.lastElementChild.style.backgroundColor = "blue";

Updated Fiddle

來源

2016-04-01 14:39:09 4castle

Firstchild/lastchild不能在JavaScript中工作

回答

相關問題