Javascript循环拒绝执行函数

Question

我的javascript更改了innerHTML,但拒绝为它添加延迟.我的目标是创建一个菜单,将列表项目一个接一个地移动,但这仅适用于前两个列表项.我使用innerHTML,所以我可以看到它是否触及它们.我不确定什么不行.我做了x [0],x [1] ..等等,它起作用了.还有一个问题:D,如何在特定ID中选择TagName的所有元素？

JS:

    var x = document.getElementsByTagName("LI");
    var delay = 0;
        for (i=0; i<=x.length; i++){

            x[i].style.padding = "0 0 0px 20px";
            x[i].style.transition = "1s " + delay +"s !important"
            x[i].innerHTML = "Changed";
            delay += "0.1";
        }

HTML:

       <header class = "mainHeader">
            <nav>
                <ul id = "mainNav">
                    <li id = "search"><img src = "img.png"><input type = "text" placeHolder = "" id = "search"></li>
                    <li><a href ="#">HOME</a></li>
                    <li><a href ="#">ABOUT</a></li>
                    <li><a href = "#">PHOTOGRAPHY</a></li>
                    <li><a href ="#">PROJECTS</a></li>
                    <li><a href ="#">CONTACT</a></li>

                </ul>
            </nav>
    </header>`

Answer 1

尝试

delay = delay + 0.1;

不使用""因为这使它成为一个字符串,因此它不会表现为数字并将数字增加0.1,它将开始变为00.10.10.10.1等

在回答

如何在特定ID中选择TagName的所有元素？

使用JQuery:

$('tagname#some_id')

要么

$('tagname[id="some_id"]')