Formatar texto de varias DIV com mesma CLASS com jQuery - Bruno Devx - BR Criativus

post #1479

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:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=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