Summarize dynamic texts in PHP with jquery

Question:

I managed to make the See More function, with a code here on StackOverflow, but the texts come from the dynamic database, so how do I make this code get each text?

Code in php:

< div class="box-body" id="texto">
    <?php
        $texto = htmlentities($row['texto']);
        $texto = preg_replace('/[\n\r]{1,}/',"\n\n",$texto);
        echo nl2br(emoticons($texto)); 
    ?>
</ div>

JQuery Code:

var wordLimit = 50;
$(function() {
  //trata o conteúdo na inicialização da página
  $('#texto').each(function() {
    var post = $(this);
    var text = post.text();
    //encontra palavra limite
    var re = /[\s]+/gm, results = null, count = 0;
    while ((results = re.exec(text)) !== null && ++count < wordLimit) { }
    //resume o texto e coloca o link
    if (results !== null && count >= wordLimit) {
      var summary = text.substring(0, re.lastIndex - results[0].length);
      post.text(summary + '...');
      post.data('original-text', text);
      post.append('<br/><a href="#" class="read-more">Leia mais</a>');
    }
  });

  //ao clicar num link "Leia mais", mostra o conteúdo original
  $('.read-more').on('click', function() {
    var post = $(this).closest('#texto');
    var text = post.data('original-text');
    post.text(text);
  });

});

Answer:

Whenever I have to do this, I do it this way, which I find simpler:

 $(function(){ // escondo todos os textos completos $('.more').hide(); // quando clicar em ver mais $('.see').click(function(){ // pego o ID var id = $(this).prop('id'); // mostro a publicação completa do post $('section#p'+id+' > .more').show('fast'); // oculto o resumo daquele post $('section#p'+id+' > .abstract').hide('fast'); }); // quando clicar em ver menos $('.hide').click(function(){ // pego o ID var id = $(this).prop('id'); // oculto a publicação completa do post $('section#p'+id+' > .more').hide('fast'); // mostro o resumo daquele post $('section#p'+id+' > .abstract').show('fast'); }); });
 .post { border: 1px solid #000; padding: 10px; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="post" id="p1"> <div class="abstract"> Texto resumido pelo php est... <a href="#" class="see" id="1" >Ver Mais</a> </div> <div class="more"> <p>Texto resumido pelo php está completo agora</p> <a href="#" class="hide" id="1" >Ver Menos</a> </div> </section> <section class="post" id="p4"> <div class="abstract"> Mais um post com descrição ... <a href="#" class="see" id="4" >Ver Mais</a> </div> <div class="more"> <p>Mais um post com descrição resumida com PHP que agora está sendo exibido inteiro</p> <a href="#" class="hide" id="4" >Ver Menos</a> </div> </section>
Post Views: 2
Scroll to Top