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

Question

我有一個div里面有多個p元素。 我想知道如何限制同一類的每個div中第一個p元素的字符長度。

的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（到目前為止）

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>';
  }
}

我想我是對的，直到我嘗試編輯文本本身的長度。 但是，在解釋我做錯事情時，我們將不勝感激。 為了您的方便我開了一個小提琴。

Answer 1

檢查我已經檢查了所有p元素的長度

  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

只需按照以下步驟編輯腳本：

 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

盡管我的建議確實將我引向了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>';
  }
}