post

Formatar texto de varias DIV com mesma CLASS com jQuery

Publicado em: 24/02/2022 / Atualizado em: 24/02/2022

Categorias: BlogJavaScript (JS)jQueryJS

Como o modelo de script abaixo, é possível pegar os valores de texto de uma sequencia de divs (como uma grade repetida), e editar sua formatação em HTML e até mesmo seus valores.

O exemplo abaixo mostra uma possibilidade de uso:

<div class="grade-de-produtos">
  <div>
    <h3>Titulo produto 01</h3>
  	<div class="descricao-produto">Produto bom || parcele em até 12x || R$150,00</div>
  </div>
  <div>
    <h3>Titulo produto 02</h3>
  	<div class="descricao-produto">Produto bom || parcele em até 12x || R$198,00</div>
  </div>
  <div>
    <h3>Titulo produto 03</h3>
  	<div class="descricao-produto">Produto bom || parcele em até 12x || R$250,00</div>
  </div>
</div>
$(".grade-de-produtos .descricao-produto").each(function() {
    var descricao = $(this).text().trim().split("||");
    var nova_descricao = "<p class='descricao'>" + descricao[0] + "</p><p class='descricao_2'>" + descricao[1] + "</p><p class='valor'>" + descricao[2] + "</p>";
    $(this).html(nova_descricao);
});

Resultado do exemplo: https://Formatar-texto-de-varias-DIV-com-mesma-CLASS-com-jQuery.brunoalbim.repl.co

OBS: Não se esqueça de adicionar a biblioteca jQuery ao seu código.

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1479

ID de Referência: 1479

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato