Nodelist内容

Question

我有一个用querySelectorAll获得的节点列表，我在这个节点列表上使用一个forEach来获取每个节点的innerText的值，然后如果有更多的单词(然后是20个)，我会截断innerText，然后我想在每个元素上分配DOM上的新innerText，在这方面我需要一些帮助。

​

function truncate(el, wordCount) {  
  return el.split(" ").splice(0, wordCount).join(" ");
}

let test = document.querySelectorAll(".test p");

test.forEach(function (item) {
    item = item.innerText;
    var text = truncate(item, 20);
    return item.innerText = text;
  });

<div class="test">
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
</div>

​

Answer 1

您需要使用的是splice.

• You而不是

1. 覆盖包含DOM元素的变量item (您正在用它的文本内容(字符串)覆盖它)，所以在forEach的末尾，您要将文本分配回一个字符串，而不是DOM元素。要么使用不同的变量名，要么根本不使用变量名，因为truncate可以简单地被调用，就像不需要forEach中的return语句一样。

就像这样：

​

function truncate(text, wordCount) {  
  return text.split(" ").slice(0, wordCount).join(" ");
}

let test = document.querySelectorAll(".test p");

test.forEach(function(item) {
  let text = truncate(item.innerText, 20);
  item.innerText = text;
});

/*

the forEach above can be shortened even more, like so:

test.forEach(item => item.innerText = truncate(item.innerText, 20));

*/

<div class="test">
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
</div>

​