javascript - 为什么在我添加 if 时我的 javascript 不执行任何操作？

Question

所以一切正常，但是当我尝试添加 IF 语句时没有任何效果。有谁知道为什么我的 javascript 中的 if 语句会破坏一切？

我的意图: 让每个元素都添加了过渡和填充； 更改包含子元素的背景颜色；所以

 nav  ul   li 1   li 2   li 3   li 4    ul      li 4.1      li 4.2      li 4.3   /ul  li 5 /ul /nav

means I would have the background of list item 4 to be changed to a color

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

            x[i].style.padding = "0 0 0px 20px";
            x[i].style.transition = transition + "s " + delay +"s";
            delay += 0.02;
            transition += 0.07; // The higher the number, the slower of exponential decay
            if (x[i].getElementsByTagName('UL').getElementsByTagName('LI')>0){
                x[i].style.background = "red";
                }

        }

Answer 1

假设您要查找的是嵌套的 <ul> , 那么这段代码有几个问题:

         if (x[i].getElementsByTagName('UL').getElementsByTagName('LI')>0){
            x[i].style.background = "red";
         }

应该是:

         if (x[i].querySelectorAll('ul li').length >0){
            x[i].style.background = "red";
         }

第一个问题是 getElementsByTagName()返回一个 nodeList 而你不能做 .getElementsByTagName('LI')在节点列表上。然后，即使您可以这样做，您也不能只将 nodeList 与 > 0 进行比较。因为你必须看长度。我建议将操作合并为一个 querySelectorAll()打电话然后使用 .length .