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 等

回答

How can I select all elements with TagName in a certain ID?

使用 JQuery:

$('tagname#some_id')

或

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