post

Formatar texto de varias DIV com mesma CLASS com jQuery

Publicado em: 24/02/2022

Categorias: BlogJavaScriptjQueryJS

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.

Link de 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 para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários