цикл через 2 массива - PullRequest
Новая
       5

цикл через 2 массива

0 голосов
/ 11 декабря 2018

Я пытаюсь перебрать 2 массива.Первый массив - это имя ссылки, второй массив - это значение ссылки 'a'.Я хочу перебрать два массива, прикрепляя значение второго массива к href каждой ссылки, которая создается / в первом массиве.Это то, что у меня есть, и это не работает для меня.

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

У меня он работает с одним циклом forEach, но я запутался в том, как бы я вложил второй 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;
 });

Это правильный способ сделать это или естьболее простой / чистый способ сделать это?

Ответы [ 4 ]

0 голосов
/ 11 декабря 2018

Замените циклы for на это (мы обновляем document только один раз): 

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('');

редактируемый пример здесь .Если вам нужна лучшая производительность, используйте insertAdjacentHTML.Я не изменяю входные данные, но лучше подходить, когда вы помещаете href и ссылку в один объект, как в azad ответе, а затем используете map.

0 голосов
/ 11 декабря 2018

создайте массив объектов, который содержит имя ссылки и URL, затем вы можете выполнить итерацию этого объекта для добавления элементов привязки в ваш домен следующим образом: 

//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)

});
0 голосов
/ 11 декабря 2018

почему вы не используете массив объектов, кроме двух массивов?

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>

Я думаю, что это эффективно.

0 голосов
/ 11 декабря 2018

Вам не нужен вложенный цикл - вам просто нужно связать i th элемент в links с i th элементом hrefLinks.С forEach вы можете сделать это, просто используя второй аргумент для обратного вызова, который будет ссылаться на текущий индекс, итерируемый по: 

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);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...