0

Fala pessoal, tudo bem? Estou tentando resolver a seguinte questão, mas não estou conseguindo. Será que alguém poderia me dar uma ajuda?

Eu preciso pegar o element html onde um determinando texto se encontra. Ou seja, eu percorro uma certo bloco html, encontro o texto que eu preciso, mas eu não achei uma forma de pegar o elemento html para realizar uma determinação ação nele, exemplo inserir uma classe ou remover a mesma.

Alguém sabe como fazer isso?

<div class="bloco1">
  <span>texto 1</span>
  <span>texto 2</span>
  <span>texto 3</span>
</div>

Gostaria de percorrer o elemento da classe bloco1 encontrar o texto 1. No span deste texto eu gostaria de inserir ou remover uma classe.

Grato pela ajuda!

1
  • Olha andei pesquisando com JQuery, espero que lhe ajude: api.jquery.com/children Manipulando esse os span dentro da Class bloco1 você pode adicionar ou remover css nos <span> Commented 3/09/2019 às 20:48

1 Resposta 1

1

Até onde eu sei, existem queries para procurar elementos por id, tag, classe, atributo, mas não HTML interno. Você terá que fazer um tradicional laço for. Faça um getElementsByClassName ou querySelector para buscar seu elemento bloco1, depois faça um for nos filhos (children) desse elemento.

Compare o HTML interno (innerHTML) ou texto interno (innerText) com a string que você está procurando, e se encontrar, adicione a classe nesse elemento.

A diferença entre HTML interno e texto interno é que o texto escapa de tags HTML, então se você tiver um elemento como <span><strong>Texto</strong></span>, o HTML interno desse elemento será <strong>Texto</strong>, mas o texto interto será Texto.

var bloco1 = document.querySelector('.bloco1')

// Exemplo utilizando laço for
for (var span of bloco1.children)
  if (span.innerText === 'texto 1')
    span.classList.add('red')

// Exemplo utilizando métodos do array
Array.from(bloco1.children)
  .filter(span => span.innerText === 'texto 3')
  .forEach(span => span.classList.add('orange'))
.red {
  color: red;
}

.orange {
  color: orange;
}
<div class="bloco1">
  <span>texto 1</span>
  <span>texto 2</span>
  <span>texto 3</span>
  <span>texto 1</span>
  <span>texto 2</span>
  <span>texto 3</span>
</div>

1
  • Obrigado amigo, funcionou certinho as opções! Commented 5/09/2019 às 12:53

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 .