时间戳

首页 > 解决方案 > 纯 JavaScript 更改 url 循环

javascript - 纯 JavaScript 更改 url 循环

问题描述

  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>

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

标签： javascript

解决方案

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

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

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

推荐阅读