节点列表内容

Question

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

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

你需要使用的是slice rather than splice.
您正在覆盖包含 DOM 元素的变量 item（您正在使用它的文本内容，一个字符串覆盖它），所以在 forEach 的末尾，您' 将文本分配回字符串而不是 DOM 元素。要么使用不同的变量名，要么根本不使用一个，因为 truncate 可以像 truncate(item.innerText, 20).
不需要 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>

节点列表内容

Nodelist content

javascript

nodelist

innertext