querySelectorAll selects 只选择第一个元素

Question

我正在使用下面的代码，由 Niels Reijnders 在此线程上编写，以将段落的每一行换行成 span。

function splitLines(container, opentag, closingtag) {
  var spans = container.children,
    top = 0,
    tmp = '';
  container.innerHTML = container.textContent.replace(/\S+/g, '<n>$&</n>');
  for (let i = 0; i < spans.length; i++) {
    var rect = spans[i].getBoundingClientRect().top;
    if (top < rect) tmp += closingtag + opentag;
    top = rect;
    tmp += spans[i].textContent + ' ';
  }
  container.innerHTML = tmp += closingtag;
}

splitLines(document.querySelectorAll('p')[0], '<span>', '</span>')

效果很好，完成了我需要的，但只选择了 DOM 的第一段，没有选择其他段落。似乎添加 forEach 方法可能会解决我正在寻找的问题，但我不知道如何在此代码中实现它。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

你会想要这样的东西：

document.querySelectorAll('p').forEach(p => splitLines(p, '<span>','</span>'))

querySelectorAll selects 只选择第一个元素

querySelectorAll selects only selects the first element

javascript

selectors-api