Почему функция arr.filter не работает?

218

14 июня 2018, 02:00

Нативный начал только учить - примеры брал с MDN

Вот пример который не работает

var el1 = document.getElementsByClassName('red'); 
var el2 = document.getElementsByClassName('green'); 
var el3 = document.getElementsByClassName('blue'); 
var el4 = document.getElementsByClassName('grey'); 
var el5 = document.getElementsByClassName('pink'); 
 
var arr = [el1,el2,el3,el4,el5]; 
 
 
var rs = arr.filter(function(e) { 
	return e.indexOf(el2); 
}); 
 
 
console.log(rs);

В общем filter() почему то не работает ... объясните плиз почему так ?

Answer 1

var all = document.querySelectorAll( 
  '.red, .green, .blue, .grey, .pink'); 
var arr = []; 
for(var i = 0; i < all.length; i++) 
  arr.push(all[i]); 
 
var reds = arr.filter(function(e) { 
  return e.classList.contains("red"); 
}); 
 
arr.forEach(item => item.style.display = 'none'); 
reds.forEach(item => item.style.display = 'block'); 
 
console.log(reds);

или сразу

arr.forEach(item => 
  item.style.display = item.classList.contains("red")? 'block' : 'none');

Если red передано как page.html#red:

var all = document.querySelectorAll('.red, .green, .blue, .grey, .pink');
var hash = window.location.hash.substr(1);
console.log(hash, all.length);
for(var i = 0; i < all.length; i++)
  all[i].style.display = all[i].classList.contains(hash)? 'block' : 'none';