Содержание списка узлов

У меня есть список узлов, полученный с помощью querySelectorAll, и я использую forEach в этом списке узлов, чтобы получить значения внутреннего текста каждого узла, затем я усекаю внутренний текст, если слов больше, чем 20, а затем я хочу назначить новый внутренний текст обратно в 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>


javascript nodelist innertext
person Jhon Beam    schedule 28.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

  1. Вам нужно использовать slice вместо splice.
  2. Вы переопределяете переменную item, которая содержит элемент DOM (вы переопределяете его текстовым содержимым, строкой), поэтому в конце forEach вы присваиваете текст обратно строке, а не элементу DOM. Либо используйте другое имя переменной, либо не используйте его вообще, так как truncate можно вызывать просто как truncate(item.innerText, 20).
  3. Оператор return в forEach не нужен.

Что-то вроде этого:

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>

person ibrahim mahrir    schedule 28.07.2020