3

Queria adicionar a class tab-active a todos as tag span da div menuMobileTabs. O que há de errado?

<div id='menuMobileTabs'>
  <span>Sidebar</span>
  <span>RedeSociais</span>
  <span>Menu</span>
  <span>Search</span>
</div>

<script>
var menuTabs = document.querySelector('#menuMobileTabs span'); 

for(var i = 0;i < menuTabs.length;i++){
  menuTabs[i].classList.add('tab-active');
}
</script>
2
  • Pronto. Ta ai! O CDATA é por causa que uso blogger.
    – Ericki
    Commented 30/11/2016 às 12:49
  • 1
    Melhorou bastante com o código, facilita muito pra quem vai testar.
    – Largato
    Commented 30/11/2016 às 13:07

4 Respostas 4

6

Utilize querySelectorAll para buscar a lista de elementos, o querySelector vai trazer apenas o primeiro span neste caso.

4

Se menuTabs é um array, você pode acessar ele sem um índice, com está fazendo nessa linha:

menuTabs.classList.add('tab-active');

O correto seria:

menuTabs[i].classList.add('tab-active');

Além disso, querySelector pode trazer um elemento, use querySelectorAll

3

Tem que utilizar o querySelectorAll em vez de querySelector a diferença é que ele pega todas as ocorrências e não apenas uma (no caso o primeiro span).

var menuTabs = document.querySelectorAll('#menuMobileTabs span');

for(i = 0; i < menuTabs.length; i++)
{
  menuTabs[i].classList.add("tag-active");
}
.tag-active {
  color:red;
}
<div id="menuMobileTabs">
  <span>Siber</span>
  <span>Rede Sociais</span>
  <span>Menu</span>
  <span>Search</span>
</div>


Pode trabalhar de maneira resumida:

document.querySelectorAll('#menuMobileTabs span').forEach(function(el)
{
   el.classList.add("tag-active");
});
.tag-active {
  color:blue;
}
<div id="menuMobileTabs">
  <span>Siber</span>
  <span>Rede Sociais</span>
  <span>Menu</span>
  <span>Search</span>
</div>

Referencias

1

O erro está no querySelector, você tem que usar o querySelectorAll, assim pega todas as ocorrências.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .