Question

在以下 HTML

中

<a>

应该反转var n = document.querySelector("nav"); var max = n.children.length; var arrReverse = []; for (i = (max - 1); i > -1; i -= 1) { arrReverse.push(n.children[i]); }。

的JavaScript

创建一个反向数组：

for(j = 0; j < max; j += 1) {
  n.children[j].innerHTML = arrReverse[j].innerHTML;
  n.children[j].href = arrReverse[j].href;
}

我认为这样可行：

contact more more contact

但事实并非如此。输出为{{1}}。

有人可以解释，为什么这不起作用。

JSFiddle

Answer 1

当你更改n.childerns arrReverse时也会改变

var n = document.querySelector("nav");
var max = n.children.length;
var arrReverse = [];

for(i = (max - 1); i > -1; i -= 1) {
  arrReverse.push([n.children[i].innerHTML,n.children[i].href]);
}

for(j = 0; j < max; j += 1) {
  // console.log(arrReverse[j].innerHTML);
  n.children[j].innerHTML = arrReverse[j][0];
  n.children[j].href = arrReverse[j][1];
}

Answer 2

我认为这是因为你在这里存储引用（因为children [i]是object）：

arrReverse.push(n.children[i]);

因此，您的arrReverse元素是对n。children[i]的引用，而不是新对象。这就是为什么在这里：

n.children[j].innerHTML = arrReverse[j].innerHTML;
n.children[j].href = arrReverse[j].href;

您正在获得在之前的循环迭代中已更改的值。

正确的代码是：

var n = document.querySelector("nav");
var max = n.children.length;
var arrReverse = [];

for(i = (max - 1); i > -1; i -= 1) {
  arrReverse.push(clone(n.children[i]));  //here we store new objects, not references
}

for(j = 0; j < max; j += 1) {
  // console.log(arrReverse[j].innerHTML);
  n.children[j].innerHTML = arrReverse[j].innerHTML;
  n.children[j].href = arrReverse[j].href;
}

function clone(obj)
{ 
   var clone = {};
   clone.prototype = obj.prototype;
   for (property in obj) clone[property] = obj[property];
   return clone;
}

JSFiddle

Answer 3

你不需要在循环中调用DOM元素，在这里每次迭代都会改变：

for(j = 0; j < max; j += 1) {
   n.children[j].innerHTML = arrReverse[j].innerHTML;
   n.children[j].href = arrReverse[j].href;
}

最好是保存来自他们的数据，将其反转并向用户显示。

var n = document.querySelector("nav");
var a = n.querySelectorAll("a"),
    max = a.length;
var arrReverse = [],
    menu = [],
    i, j, k = 0;

// save data
for (k = 0; k < max; k++) {
        menu[k] = {
      text: a[k].innerHTML,
      link: a[k].href
    }
}

// reverce data
for (i = (max - 1); i > -1; i -= 1) {
  arrReverse.push(menu[i]);
}

// print reversed data
for(j = 0; j < max; j += 1) {
  a[j].innerHTML = arrReverse[j].text;
  a[j].href = arrReverse[j].link;
}

Fiddle

menu = []存储您的数据，而不是反转它（在新数组中）。在最后一个循环中，您只需从中获取数据，并将其设置在正确的位置。

希望你正在寻找这个。

Answer 4

你不需要做两次迭代，使用正则表达式和String类的“匹配”方法，解决方案会更干净：

HTML代码：

<nav>
  <a href="home.html">home</a>
  <a href="about.html">about</a>
  <a href="more.html">more</a>
  <a href="contact.html">contact</a>
</nav>

JavaScript代码：

var nav = document.querySelector("nav");
nav.innerHTML = nav.innerHTML.match(/<a[^>]+>[^<]+<\/a>/g).reverse().join("\n");

jsfiddle

反转HTML标签，了解任务

4 个答案: