纯JavaScript更改url循环

Question

  var list = document.querySelectorAll(".list a");
  for(var b = 0; b < list.length; b++) {
    var _list2 = document.querySelectorAll(".list2 a");
    for(var a = 0; a < _list2.length; a++) {
      list[b].href = _list2[a].href;
    }
  }

<div class="list">
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

<div class="list2">
  <ul>
    <li><a href="https://www.sample_a.com"></a></li>
    <li><a href="https://www.sample_b.com"></a></li>
    <li><a href="https://www.sample_c.com"></a></li>
    <li><a href="https://www.sample_d.com"></a></li>
    <li><a href="https://www.sample_e.com"></a></li>
  </ul>
</div>

<h2>Expected Result</h2>
<div class="list">
  <ul>
    <li><a href="https://www.sample_a.com"></a></li>
    <li><a href="https://www.sample_b.com"></a></li>
    <li><a href="https://www.sample_c.com"></a></li>
    <li><a href="https://www.sample_d.com"></a></li>
    <li><a href="https://www.sample_e.com"></a></li>
  </ul>
</div>

如何通过循环将“ .list空的超链接替换为.list2超链接”？我对这个循环感到困惑。当我使用此循环时，我将获得所有超链接的最后一个超链接。如何解决？

Answer 1

这应该工作

var list = document.querySelectorAll(".list a");
var _list2 = document.querySelectorAll(".list2 a");
for(var b = 0; b < list.length; b++) {
  list[b].href = _list2[b].href;
}

Answer 2

您不需要内部循环，因为您只想替换与第二个列表在第一个列表相同索引处的元素的href：

var list = document.querySelectorAll(".list a");
var _list2 = document.querySelectorAll(".list2 a");

if (list.length === _list2.length) {             // check arrays are same length
  for (var a = 0; a < list.length; a++) {
    list[a].href = _list2[a].href;               // you just want to replace the href at the same index
  }
}

<div class="list">
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

<div class="list2">
  <ul>
    <li><a href="https://www.sample_a.com"></a></li>
    <li><a href="https://www.sample_b.com"></a></li>
    <li><a href="https://www.sample_c.com"></a></li>
    <li><a href="https://www.sample_d.com"></a></li>
    <li><a href="https://www.sample_e.com"></a></li>
  </ul>
</div>

Answer 3

之所以总是从第二个列表中获取最后一个链接，是因为您要遍历第二个列表中的每个项目，对于第一个列表中的每个项目。将设置的值将始终是循环中的最后一个：第二个列表中的最后一个项目。

您需要做的是仅遍历第一个列表，并使用相同的索引访问第二个列表中的元素。您需要确保第二个列表至少与第一个列表一样长。

此外，正如他们的注释中提到的evolutionxbox：您不需要CDATA注释（在HTML和JS中）。

var list = document.querySelectorAll('.list a');
var list2 = document.querySelectorAll('.list2 a');
if (list.length <= list2.length) {
  for (var i = 0; i < list.length; ++i) {
    list[i].href = list2[i].href;
  }
}

<div class="list">
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

<div class="list2">
  <ul>
    <li><a href="https://www.sample_a.com"></a></li>
    <li><a href="https://www.sample_b.com"></a></li>
    <li><a href="https://www.sample_c.com"></a></li>
    <li><a href="https://www.sample_d.com"></a></li>
    <li><a href="https://www.sample_e.com"></a></li>
  </ul>
</div>

Answer 4

只需经过一个循环

var list = document.querySelectorAll(".list a");
var _list2 = document.querySelectorAll(".list2 a");
if (list.length === _list2.length) {
  for (var a = 0; a < _list2.length; a++) {
    list[a].href = _list2[a].href;
  }
}

Answer 5

使用扩展运算符...和forEach的替代方法。（CSS仅用于打印href属性的值）

var l1_a = [...document.querySelectorAll('.list a')];
var l2_a = [...document.querySelectorAll('.list2 a')];

l2_a.forEach(function(el, i) {
   l1_a[i].href = el.href;
});

a[href^=http]::before {
   content: attr(href);
}

<div class="list">
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

<div class="list2">
  <ul>
    <li><a href="https://www.sample_a.com"></a></li>
    <li><a href="https://www.sample_b.com"></a></li>
    <li><a href="https://www.sample_c.com"></a></li>
    <li><a href="https://www.sample_d.com"></a></li>
    <li><a href="https://www.sample_e.com"></a></li>
  </ul>
</div>

Answer 6

我会尝试这样做

HTML

<div class="list">
 <ul>
   <li><a href="#">a</a></li>
   <li><a href="#">b</a></li>
   <li><a href="#">c</a></li>
   <li><a href="#">d</a></li>
   <li><a href="#">e</a></li>
 </ul>
</div>

<div class="list2">
 <ul>
   <li><a href="https://www.sample_a.com">1</a></li>
   <li><a href="https://www.sample_b.com">2</a></li>
   <li><a href="https://www.sample_c.com">3</a></li>
   <li><a href="https://www.sample_d.com">4</a></li>
   <li><a href="https://www.sample_e.com">5</a></li>
 </ul>
</div>

JS：

const list = document.querySelectorAll(".list a");
  for(let b = 0; b < list.length; b++) {
    const _list2 = document.querySelectorAll(".list2 ul a");
    list[b].href = _list2[b].href;
  }