Loop не должен нарушать Пересекая недостоверных отчетности

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-операторам, проверяющим i, относительно длины обоих массивов (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) (fiddle):

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) (fiddle):

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

Answer 2

Это сделать трюк (может быть, является более элегантным решением)

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); 

} 

Answer 3

Если вы не беспокоитесь о браузерах под IE9, вы должны использовать querySelectorAll, так как это позволит вам подобрать оба типа элементов в одном запросе.

var a = document.querySelectorAll('p, div'); 
for (var i = 0, l = a.length; i < l; i++){ 
    a[i].classList.add('nocolor'); 
} 

Fiddle

Answer 4

Другой подход найден:

function changetobw() { 
    a = document.getElementsByTagName('p'); 
    b = document.getElementsByTagName('div'); 
    var j=(a.length>b.length)?a.length:b.length; 

    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 <j); 

} 

Answer 5

Я думаю, и должны сделать конкретный общий метод, чтобы изменить цвет, а затем вызвать его для каждого типа тега и нужно, а затем изменить все в одном
попробовать это:

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

demo: http://jsfiddle.net/A52Lj/5/