Using javascript function on foreach loop in laravel blade

Question

I want to use javascript for word limit on <p> tags, using foreach loop. It works pretty well but only works on the first data, like this:

This is how my foreach seems like:

<?php foreach ($khotbah as $key): ?>
  <article class="article-post mb70">
    <div class="post-content">
      <a href="#"><h2 class="post-title">{{$key->title}}</h2></a>
      <ul class="post-meta list-inline">
        <li class="list-inline-item">
          <i class="fa fa-user-circle-o"></i> <a href="#">{{$key->author}}</a>
        </li>
        <li class="list-inline-item">
          <i class="fa fa-calendar-o"></i> <a href="#"><?php $date_created = date_create($key->created_at); echo date_format($date_created,'d F Y H:i')?></a>
        </li>
      </ul>
      <p>{{$key->description}}</p>

      <a href="ringkasan-khotbah/{{$key->id}}" class="btn btn-outline-secondary">Read More</a>
    </div>
  </article><!--article-->
<?php endforeach; ?>

and this is what I'm doing in my javascript:

<script type="text/javascript">
  function truncateText(selector, maxLength) {
    var element = document.querySelector(selector),
        truncated = element.innerText;

    if (truncated.length > maxLength) {
        truncated = truncated.substr(0,maxLength) + '...';
    }
    return truncated;
  }

  document.querySelector('p').innerText = truncateText('p', 107);
</script>

is it possible to use javascript on foreach loop? Should I put another method on my javascript so it can be used on foreach loop?

querySelector will match the first element, since you have multiple p tags, check out querySelectorAll — Phix
– Phix, Commented Apr 24, 2020 at 17:32

Stuart · Accepted Answer · 2020-04-24 17:49:13Z

You need to select all of your paragraphs and apply your truncate to each.

I have commented in the code below:

function truncateText(el, maxLength) {
  // no need to querySelector here now, 
  // as we have passed in the element
  let truncated = el.innerText;

  if (truncated.length > maxLength) {
      truncated = truncated.substr(0, maxLength) + '...';
  }
  return truncated;
}

// Run your truncate function when tyhe DOM has loaded
document.addEventListener('DOMContentLoaded', (event) => {
  // select all your P's using querySelectorAll
  const ps = document.querySelectorAll('p');
    
  // for each p, run your turncate function, passing the *element*
  ps.forEach((p) => {p.innerText = truncateText(p, 50);});
});

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget imperdiet odio, hendrerit egestas neque. Pellentesque lobortis pulvinar rutrum. Donec eros eros, fermentum vitae tempus ut, suscipit in ligula. Maecenas et scelerisque erat, suscipit lobortis metus. In aliquet velit ac velit mollis luctus. Sed dapibus arcu eget enim vestibulum elementum. Nunc vel ultrices erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget imperdiet odio, hendrerit egestas neque. Pellentesque lobortis pulvinar rutrum. Donec eros eros, fermentum vitae tempus ut, suscipit in ligula. Maecenas et scelerisque erat, suscipit lobortis metus. In aliquet velit ac velit mollis luctus. Sed dapibus arcu eget enim vestibulum elementum. Nunc vel ultrices erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget imperdiet odio, hendrerit egestas neque. Pellentesque lobortis pulvinar rutrum. Donec eros eros, fermentum vitae tempus ut, suscipit in ligula. Maecenas et scelerisque erat, suscipit lobortis metus. In aliquet velit ac velit mollis luctus. Sed dapibus arcu eget enim vestibulum elementum. Nunc vel ultrices erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget imperdiet odio, hendrerit egestas neque. Pellentesque lobortis pulvinar rutrum. Donec eros eros, fermentum vitae tempus ut, suscipit in ligula. Maecenas et scelerisque erat, suscipit lobortis metus. In aliquet velit ac velit mollis luctus. Sed dapibus arcu eget enim vestibulum elementum. Nunc vel ultrices erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget imperdiet odio, hendrerit egestas neque. Pellentesque lobortis pulvinar rutrum. Donec eros eros, fermentum vitae tempus ut, suscipit in ligula. Maecenas et scelerisque erat, suscipit lobortis metus. In aliquet velit ac velit mollis luctus. Sed dapibus arcu eget enim vestibulum elementum. Nunc vel ultrices erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget imperdiet odio, hendrerit egestas neque. Pellentesque lobortis pulvinar rutrum. Donec eros eros, fermentum vitae tempus ut, suscipit in ligula. Maecenas et scelerisque erat, suscipit lobortis metus. In aliquet velit ac velit mollis luctus. Sed dapibus arcu eget enim vestibulum elementum. Nunc vel ultrices erat.</p>

Collectives™ on Stack Overflow

Using javascript function on foreach loop in laravel blade

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related