Question

我试图用香草JS制作推荐模块，当我使用＆＃34; for＆＃34;时我遇到了问题。循环收集 - 控制台写推荐[i] .nextElementSibling为空。当我手动设置集合元素的索引时没有问题 - 它可以工作。

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

Answer 1

这是因为你正在尝试获取循环中的下一个元素，但是没有更多元素可用，所以：

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

基本上，如果它不是最后一次迭代，那么只获取 next element sibling ;所以如果你有3个元素，不要试图获得4个。

tesimonials.length是3，所以我们减去1

Answer 2

只需以这种方式更改for循环。

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

nextElementSibling为null

2 个答案: