Question

试图弄清楚如何使用纯js来做到这一点，所以jquery不是一个选项。

假设我想获取div中的所有段落标记，并在每个不包含单个图像或其他标准的段落后插入新的div。

假设我得到所有段落：

const paragraphs = document.getElementsByTagName("p");

我如何遍历每个段落，评估它是否符合标准并附加div如果它？我实现了HTMLCollection段落的每个元素的for循环不是一个选项，因为HTMLCollections是实时的。

使用纯javascript实现此目的的最有效方法是什么，假设使用了最新版本的Chrome。

Answer 1

不要乱用现场HTMLCollections，当需要这些东西时，它们是一种回归。使用querySelectorAll()因为它返回的NodeList是“静态的”。

详细信息在Snippet

中注释

<强>段

/* Collect all <p> into a NodeList then convert it into an
|| array
*/
var pArray = Array.from(document.querySelectorAll('p'));

/* Using the .map() method 
|| on every <p> check to see if each one has any text
|| If so, then replace that text with the index number of
|| the <p>. Otherwise black it out and add a <div> after
|| it with the insertAdjacentHTML() method 
*/
pArray.map(function(txt, idx) {
  if (txt.textContent.length > 0) {
    txt.textContent = idx;
  } else {
    txt.style.background = 'black';
    txt.insertAdjacentHTML('afterend', '<div></div>');
  }
});

p {
  border: 1px solid red;
  font: 10px/1 Arial;
  height: 10px;
}

div {
  background: red;
  height: 10px;
}

<p></p>
<p></p>
<p>TEXT</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>TEXT</p>
<p></p>
<p>TEXT</p>
<p>TEXT</p>
<p></p>
<p></p>
<p></p>
<p>TEXT</p>
<p></p>
<p>TEXT</p>
<p></p>
<p></p>
<p></p>
<p>TEXT</p>
<p></p>
<p></p>
<p>TEXT</p>
<p>TEXT</p>

如果满足条件，则尝试在HTMLCollection中的项目后添加元素

1 个答案: