nextElementSibling爲null

我正在嘗試使用vanilla JS製作感言模塊，當我對收藏使用「for」循環時，出現問題 - 控制檯寫道感言[i] .nextElementSibling爲空。當我手動設置collection元素的索引時它沒有問題 - 它可以工作。nextElementSibling爲null

<section class="testimonials-wrap">  
      <h2>testimonials</h2> 
      <div> 
       <p class="active">Mauris quis nulla ut dui luctus euismod ac sit amet diam. Nulla ullamcorper tortor nec.</p> 
       <p>Vivamus aliquet massa nec odio sagittis, eget faucibus metus malesuada. Nam sed neque pellentesque, cursus.</p> 
       <p>Sed bibendum nec ligula sit amet accumsan. Sed neque est, commodo sed tortor in, tincidunt.</p> 
      </div> 
     <ul> 
      <li class="next"><i class="fa fa-chevron-right"></i></li> 
      <li class="prev"><i class="fa fa-chevron-left"></i></li> 
     </ul> 
</section> 

function goToTheNextTest(){ 
    var testimonials = document.getElementsByClassName("testimonials-wrap")[0].getElementsByTagName("div")[0].getElementsByTagName("p"); 
    for(var i = 0; i < testimonials.length; i++){ 
     if(testimonials[i].className === "active"){ 
      testimonials[i].className = ""; 
      //testimonials[i].nextElementSibling.className = "active"; 
     } 
    } 
}

來源

2016-03-06 Leo240

你有沒有檢查'推薦[i]'中會出現什麼？ –

不，我沒有。如何更好地做到這一點？ – Leo240

'var testimonials = document.querySelectorAll（「。testimonials-wrap> div> p」）;' –

只要改變以這種方式循環。

for(var i = 0; i < testimonials.length-1; i++)

來源

2016-03-06 17:58:24

這是因爲你試圖讓下一個元素在你的循環，但目前還沒有更多可用的元素，因此：

if (i !== testimonials.length -1) { 
     testimonials[i].nextElementSibling.className = "active"; 
}

基本上只能得到下一個元素同級如果它是不是最後一次迭代;所以如果你有3個要素，不要試圖獲得4

tesimonials.length是3，所以我們減去1

來源

2016-03-06 17:48:52 SomeGuy

nextElementSibling爲null

回答

相關問題