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

表示我将列表项4的背景更改为颜色

    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，你不能在nodeList上做.getElementsByTagName('LI')。然后，即使您可以这样做，也不能只将nodeList与> 0进行比较，因为您必须查看长度。我建议将操作合并到一个querySelectorAll()调用中，然后使用.length。

Answer 2

您的if语句有不正确之处：

x[i].getElementsByTagName('UL')

这将返回NodeList而不仅仅是一个DOM元素。如果你只关心你应该做的第一个元素

x[i].getElementsByTagName('UL')[0]

然后是另一部分：

.getElementsByTagName('LI')

也返回一个NodeList。您需要调用 length 属性来查看列表中有多少元素：

.getElementsByTagName('LI').length > 0

所以把所有东西放在一起：

x[i].getElementsByTagName('UL')[0].getElementsByTagName('LI').length > 0

但你应该把那个大的IF条件分解成更小的语句并检查是否为空。

当我添加我的if时，为什么我的javascript什么都不做？

2 个答案: