Question

我有一个包含多个p元素的div。我想知道如何限制同一类的每个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>';
  }
}

在我尝试编辑文本本身的长度之前，我想我一直都是。但是，帮助将被理解，并解释我做错了什么。我设置了一个小提琴for your convenience。

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

Javascript - 仅在第一段限制字符

3 个答案: