纯 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 a empty hyperlinks with .list2 hyperlinks”？ 我对这个循环感到困惑。 当我使用这个循环时，我得到了所有超链接的最后一个超链接。 如何解决这个问题？

Answer 1

您不需要内部循环，因为您只想将第一个列表中与第二个列表中相同索引处的元素的 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 2

您总是从第二个列表中获取最后一个链接的原因是因为您正在为第一个列表中的每个项目循环访问第二个列表中的每个项目。 将设置的值将始终是循环中的最后一个：第二个列表中的最后一项。

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

此外，正如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 3

这应该工作

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 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;
  }