遇到无效语句时,循环不应中断

Question

看看这个代码......

HTML

<span>TEST </span>

<div style="color:red">COlured div</div>
<div style="color:blue">COlured div</div>
<p style="color:red">Colourful TExt</p>
<p style="color:blue">Colourful TExt</p>
<p style="color:green">Colourful TExt</p>
<p style="color:brown">Colourful TExt</p>
<button onclick="changetobw()">CHANGE COLOR</button>

JavaScript的

function changetobw() {
    a = document.getElementsByTagName('p');
    b = document.getElementsByTagName('div');
    var i = 0;
    do {
        a[i].classList.add('nocolor');
        b[i].classList.add('nocolor');
        i++;
    } while (i < a.length && i < b.length);   
}

CSS

.nocolor {
    color:#000 !important;
}

DEMO

我在这里尝试做的是点击按钮使所有div和span字体颜色"黑色".

当计数器越过i = 2时,我的代码(显然)断开,因为只有2个div,因此"i [2]"将是未定义的,因此循环中断.

无论如何,在击中这一点后,循环不会破坏？也许我没有完全理解我的观点.希望大家都明白吗？

Answer 1

要像使用它一样使用循环,您必须确保两个数组具有相同的长度.

显然,它们的长度不相等,所以你要么将这一个循环分成两个循环(1),要么你用两个if语句来检查两个数组的长度(2).更好的是for与querySelectorAll(3)结合使用.

(1):

function changetobw() {
    a = document.getElementsByTagName('p');
    b = document.getElementsByTagName('div');
    var i = 0;
    do {
        a[i].classList.add('nocolor');        
        i++;
    } while (i < a.length);   
    i = 0;
    do {
        b[i].classList.add('nocolor');
        i++;
    } while (i < b.length);
}

(2)(小提琴):

function changetobw() {
    a = document.getElementsByTagName('p');
    b = document.getElementsByTagName('div');
    var i = 0;
    do {
        if(i < a.length)
          a[i].classList.add('nocolor');

        if(i < b.length)
          b[i].classList.add('nocolor');

        i++;
    } while (i < a.length || i < b.length);   
}

(3)(小提琴):

function changetobw() {
  var els = document.querySelectorAll('p, div');
  for(var i = 0; i < els.length; i++) {
    els.item(i).classList.add("nocolor");
  }
}