Question

我正在完成一项任务，但我遇到了一些问题。我们必须使用javascript将<h2>标记转换为<p>标记，同时确保它保留所有属性。

我想出了以下内容

var numElements = document.getElementsByTagName("h2").length;
for (i=0; i<numElements; i++){
    var curr = document.getElementsByTagName("h2")[i];
    var updated = document.createElement("p");
    for (j = 0; j < document.getElementsByTagName("h2")[i].attributes.length; j++){
        updated.setAttribute(curr.attributes.item(j).name, curr.attributes.item(j).value);
    }
    updated.innerHTML = curr.innerHTML;
    curr.parentNode.replaceChild(updated, curr);
}

现在这有点奏效，但我不确定为什么我会遇到问题。发生的错误是，这只适用于所有其他<h2>标记。因此，如果我在一个正文中有3个标记，它只会在第一个和第三个标记上执行此功能。

我不是在寻找jQuery的答案。

Answer 1

在第二次循环中i == 1，所以你将从列表中抓取第二个元素。

但它是一个新列表，不再包含您已经替换过的元素。旧第二个元素现在位于i == 0，永远不会被触及。

避免这种情况的最简单方法是什么？向后处理列表：

var elements = document.getElementsByTagName("h2");
var numElements = elements.length;

for (i = numElements - 1; i >= 0; i--) {
  var curr = elements[i];
  var updated = document.createElement("p");

  for (j = 0; j < curr.attributes.length; j++){
    updated.setAttribute(curr.attributes.item(j).name, curr.attributes.item(j).value);
  }

  updated.innerHTML = curr.innerHTML;
  curr.parentNode.replaceChild(updated, curr);
}

＆＃13;

var elements = document.getElementsByTagName("h2");
var numElements = elements.length;

for (i = numElements - 1; i >= 0; i--) {
  var curr = elements[i];
  var updated = document.createElement("p");

  for (j = 0; j < curr.attributes.length; j++) {
    updated.setAttribute(curr.attributes.item(j).name, curr.attributes.item(j).value);
  }

  updated.innerHTML = curr.innerHTML;
  curr.parentNode.replaceChild(updated, curr);
}

＆＃13;

.something {
  background-color: yellow;
}

＆＃13;

<h2>The first h2</h2>

<h2 style="text-decoration: underline">And the second</h2>

<h3 class="something">And the third</h3>

＆＃13;

用<p>标签替换<h2>标签，每隔一次</p> </h2> <h2>将被跳过

1 个答案: