boucle à travers 2 tableaux

Question

J'essaie de parcourir deux tableaux en boucle. Le premier tableau est le nom du lien, le second tableau est la valeur 'a' du lien. Je veux boucler à travers les deux tableaux en attachant la valeur du second tableau au href de chaque lien qui est créé / dans le premier tableau. C'est ce que j'ai et cela ne fonctionne pas pour moi.

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

for (let i = 0; i < links.length; i++) {
    for (let j = 0; j < hrefLinks.length; i++) {
        if (links.length === hrefLinks.length) {
            const li = document.createElement('li');
            const liLink = document.createElement('a');
            liLink.setAttribute('href', hrefLinks[i]);
            liLink.className = 'Test-Class';
            li.appendChild(liLink);
            li.className = 'nav-link';
            list.appendChild(li);
            li.innerHTML += links[i];
        }
    }
}

J'ai réussi à le faire fonctionner avec une boucle forEach mais je me suis embrouillé sur la façon d'imbriquer la deuxième boucle forEach ;

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

 links.forEach(function (link) {
     const li = document.createElement('li');
     const liLink = document.createElement('a');
     li.appendChild(liLink);
     li.className = 'nav-link';
     list.appendChild(li);
     li.innerHTML += link;
 });

Est-ce la bonne façon de procéder ou existe-t-il un moyen plus simple ou plus propre de le faire ?

Answer 1

Vous ne voulez pas d'une boucle imbriquée - vous avez simplement besoin de lier l'option i e élément dans links a la i e élément de hrefLinks . Avec forEach vous pouvez le faire en utilisant simplement le deuxième argument de la fonction de rappel, qui fera référence à l'index courant sur lequel l'itération est effectuée :

const list = document.body.appendChild(document.createElement('ul'));

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

links.forEach((linkName, i) => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.href = hrefLinks[i];
  a.textContent = linkName;
  li.appendChild(a);
  li.className = 'nav-link';
  list.appendChild(li);
});

Answer 2

Créez un tableau d'objets qui contient le nom du lien et l'url, puis vous pouvez itérer cet objet pour ajouter les éléments d'ancrage dans votre dom, comme suit

//an object which hold navigation url and name
var navLinks = [{
  label: 'Home',
  href: '/'
}, {
  label: 'Contact',
  href: 'contact'
}, {
  label: 'About',
  href: 'about'
}]

navLinks.forEach(function(link) {

  var li = document.createElement('li');
  li.className = 'nav-link';

  var liLink = document.createElement('a');
  var linkText = document.createTextNode(link.label);
  liLink.appendChild(linkText);
  liLink.className = 'Test-Class';
  liLink.href = link.href;

  li.appendChild(liLink);
  document.body.appendChild(li)

});

Answer 3

Remplacer les boucles for par ceci (nous mettons à jour document une seule fois) :

document.body.innerHTML += links.map( (link,i)=>`
    <li class="nav-link">
        <a class="Test-Class" href="${hrefLinks[i]}">${link}</a>
    </li> 
`).join('');

const links = ['Home', 'Contact', 'About'];
const hrefLinks = ['/', 'contact', 'about'];

document.body.innerHTML += links.map( (link,i) =>  `
    <li class="nav-link">
        <a class="Test-Class" href="${hrefLinks[i]}">${link}</a>
    </li> 
`).join('');

exemple modifiable aquí . Si vous avez besoin de meilleures performances, utilisez insertAdjacentHTML . Je ne change pas les données d'entrée mais la meilleure approche est de mettre href et lien dans un seul objet comme dans azad et ensuite utiliser map .

Answer 4

Pourquoi ne pas utiliser un tableau d'objets, sauf pour deux tableaux ?

const anchors = [
  {
    name: 'Home',
    link: '/'
  },
  {
    name: 'Contact',
    link: 'contact'
  },
  {
    name: 'About',
    link: 'about'
  }
];

let ul = document.getElementById('list');

anchors.forEach(function(item) {
  let li = document.createElement('li');
  let a = document.createElement('a');
  a.className = 'nav-link';
  a.href = item.link;
  a.innerHTML = item.name;
  li.appendChild(a);
  ul.appendChild(li);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Anchors</title>
</head>
<body>
  <ul id="list"></ul>
</body>
</html>

Je pense que c'est efficace.