Javascript-仅在第一段中限制字符

Question

I have aa div with multiple p elements within it. I wanted to know how I can limit the character length of the first p element within each div of the same class.

HTML

<div class="el">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates natus dignissimos architecto deserunt totam ullam, nulla ipsum cumque alias possimus dicta officiis provident mollitia modi tempore officia porro tenetur dolor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quidem, ad doloribus reiciendis debitis sit suscipit est cumque voluptates corporis adipisci consectetur, perspiciatis quo pariatur minima inventore omnis deleniti assumenda!</p>
</div>

Javascript (so far)

var quote = document.querySelectorAll('.el');

for (var i=0, len=quote.length; i < len; i++) {

  var text = quote[i].firstElementChild.innerHTML;
  console.log(text);

  if(text.length > 150) {
    console.log("condition met");
    text = text.substring(0,150) + '<a href="#">Read more</a>';
  }
}

I think I'm right up until I try to edit the length of text itself. But help would be appreciated along with explanation of what I'm doing wrong. I've set up a fiddle for your convenience .

Answer 1

Check this i have checked all p element length

  var quote = document.querySelectorAll('.el p');

for (var i=0, len=quote.length; i < len; i++) {

  var text = quote[i].innerHTML;
  console.log(text);

  if(text.length > 150) {
    console.log("condition met");
    text = text.substring(0,150) + ' <a href="#">Read more</a>';
    quote[i].innerHTML = text;
  }
}

Answer 2

just edit your script as follow:

 if(text.length > 150) { console.log("condition met"); text = text.substring(0,150) + '<a href="#">Read more</a>'; quote[i].firstElementChild.innerHTML= text; // update your element } 

Answer 3

I couldn't get the suggestions working as I wanted although the they did lead me to this jsFiddle .

Js:

var quote = document.querySelectorAll('.el');

for (var i=0, len=quote.length; i < len; i++) {

  var text = quote[i].firstElementChild;

  if(text.innerHTML.length > 200) {
    text.innerHTML = text.innerHTML.substring(0,200) +  '... <a href="/page-name/">Read more</a>';
  }
}