1

Gostaria de pagar todas as div que contenham exatamente as class '1 2 3' Exemplo.

<div data-full="true" class="1 2 3 4">
    <div class="1 2 3">text</div>
</div>
<div class="1 2 3">text</div>
<div class="1 2 3">text</div>
<div data-full="true" class="1 2 3 4">
   <div class="1 2 3">text</div>
</div>

Porem preciso que ele ignore nesse caso a primeira div e seus filhos e a ultima div e seus filho. todas as div pai tem o elemento data-full="true" eu tentei anteriormente usar o java script assim porem ele selecionas todas

var teste = document.querySelectorAll('.1.2.3');
for (var i=0, len=teste.length|0; i<len; i=i+1|0) {
    console.log(teste[i]);
}

conforme o link https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName porem nao funcionou com meus testes.

2 Respostas 2

4

Nome de classe um número não é interpretado corretamente. Evite usar nomes de classe ou mesmo de ID como id="1" ou class="1", se quiser escreve por extenso, tipo id="um" ou class="n1" tb funciona.

Veja aqui: ID com o primeiro caractere sendo um número não funciona quando coloco no css #[número de exemplo]
E aqui: É uma má prática colocar números como id em elementos HTML? Se sim por quê?

Depois use um forEach() no lugar do for, acho que facilita a sintaxe, e tb utilize um if para validar o className e excluir o primeiro filho.

Veja como fica a sugestão

const teste = document.querySelectorAll('.n1.n2.n3');

teste.forEach( (el) => {
  if (el.className === 'n1 n2 n3') {
    console.log(el);
  }
}) 
<div data-full="true" class="n1 n2 n3 4">
  <div class="n1 n2 n3">text</div>
</div>
<div class="n1 n2 n3">text</div>
<div class="n1 n2 n3">text</div>
<div data-full="true" class="n1 n2 n3 4">
  <div class="n1 n2 n3">text</div>
</div>

3
  • Dei essa resposta de forma simples, com código básico, mas acredito que uma resposta usando Array ou JSON seja mais adequada... só que não tenho conhecimento para tal 🙈
    – hugocsl
    3/09/2020 às 16:51
  • Regex tb pode ser uma solução, mas tb não tenho conhecimento técnico 😅
    – hugocsl
    3/09/2020 às 17:02
  • 1
    Não sabia desse problema de começar por um número, mas também nunca pensei em usar um número... Vivendo e aprendendo
    – Costamilam
    3/09/2020 às 17:09
1

Há várias opções:

console.log('Modo 1')

for (const el of document.body.querySelectorAll(':not([data-full]) > [class="n1 n2 n3"]'))
  console.log(el);

console.log('Modo 2')

for (const el of document.body.querySelectorAll(':not([data-full]) > .n1.n2.n3:not(.n4)'))
  console.log(el);
 
console.log('Modo 3')

for (const el of document.body.querySelectorAll(':not([data-full]) > .n1.n2.n3:not([data-full])'))
  console.log(el);
<div data-full="true" class="n1 n2 n3 n4">
    <div class="n1 n2 n3">text 1</div>
</div>
<div class="n1 n2 n3">text 2</div>
<div class="n3 n2 n1">text 3</div>
<div data-full="true" class="n1 n2 n3 n4">
   <div class="n1 n2 n3">text 4</div>
</div>

A ideia é pegar os elementos com as classes desejadas, que não seja precedido diretamente (>) por um elemento com o atributo data-full

  • Modo 1 [class="n1 n2 n3"]: você pode usar o seletor de atributo para buscar por um elemento com a classe exata, porém, nesse caso a ordem é importante, observe que no exemplo um dos elementos do meio não foi selecionado, já que a ordem das classes está bagunçada

  • Modo 2 .n1.n2.n3:not(.n4): pega os que tiver as classes n1, n2 e n3 e que não tenha a classe n4, nesse caso a ordem não importa

  • Modo 3 .n1.n2.n3:not([data-full]): pega os que tiver as classes n1, n2 e n3 e que não tenha o atributo data-full, caso esse atributo sempre esteja presente junto com a classe n4

1
  • Cara eu não imaginava que daria para usar esses pseudo-seletor de CSS tipo :not() dentro do JS! Bem massa!
    – hugocsl
    3/09/2020 às 17:31

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 .