Pure JavaScript change url loop

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>

How to replace “.list a empty hyperlinks with .list2 hyperlinks” through loop? I am puzzled with this loop. When I am using this loop, I am getting the last hyperlink for all hyperlinks. How to figure this out?

When you get something a bit mystifying like that, a good idea is to add some console.logs and watch what actually happens. Usually it'll help you see the logic flaws because you can trace the code paths. Or step through it with your browser's debugger. Anyway, the issue is the second (inner) loop will run 5 times (so 25 iterations in all), because it runs once for each item in the outer loop. So it assigns the last hyperlink in the inner loop to whatever the current hyperlink in the outer loop is. You don't actually need the inner loop at all. — ADyson
– ADyson, Commented Jan 9, 2020 at 15:13

Pete · Accepted Answer · 2020-01-09 15:10:34Z

You don't need the inner loop as you are just wanting to replace the href of the element at the same index in the first list as the second one:

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>

Billy Brown · Accepted Answer · 2020-01-09 15:15:56Z

The reason why you are always getting the last link from the second list is because you are looping through every item in the second list, for every item in the first list. The value that will be set will always be the last one in the loop: the last item in the second list.

What you need to do is to loop through only the first list, and use the same index to access the elements in the second list. You need to make sure that the second list is at least as long as the first.

Additionally, as evolutionxbox mentioned in their comment: you do not need the CDATA comment (in HTML and 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>

Julio Javier · Accepted Answer · 2020-01-09 18:10:16Z

0

This should work

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

edited Jan 9, 2020 at 18:10

answered Jan 9, 2020 at 15:11

Julio Javier

1624 bronze badges

Comments

Siva Kondapi Venkata · Accepted Answer · 2020-01-09 15:12:09Z

0

Just go thru one loop

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

answered Jan 9, 2020 at 15:12

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Comments

Fabrizio Calderan · Accepted Answer · 2020-01-09 15:24:03Z

An alternative approach using the spread operator ... and forEach.
(CSS used only to print the value of the href attribute)

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>

ilnicki010 · Accepted Answer · 2020-01-09 15:31:01Z

I would try to do it like this

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

Collectives™ on Stack Overflow

Pure JavaScript change url loop

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related