Оптимизация JS функция getclassname

Question

Я действительно беден в JS разработке, и я пытаюсь оптимизировать некоторый код. Я слежу за онлайн-формированием. Извините, что, возможно, задаю глупый вопрос.

У меня есть этот код для оптимизации:

function border(){

var elmnt = document.getElementsByClassName("menu__item--link")[0];

var elmnt1 = document.getElementsByClassName("menu__item--link")[1];

var elmnt2 = document.getElementsByClassName("menu__item--link")[2];


document.getElementsByClassName("menu__item--border")[0].style.height = 'calc(' + elmnt.offsetHeight + "px" +' + 6px)';
document.getElementsByClassName("menu__item--border")[0].style.marginTop = 'calc( -'+ elmnt.offsetHeight + "px" +' - 15px)';

document.getElementsByClassName("menu__item--border")[1].style.height = 'calc(' + elmnt1.offsetHeight + "px" +' + 6px)';
document.getElementsByClassName("menu__item--border")[1].style.marginTop = 'calc( -'+ elmnt1.offsetHeight + "px" +' - 15px)';

document.getElementsByClassName("menu__item--border")[2].style.height = 'calc(' + elmnt2.offsetHeight + "px" +' + 6px)';
document.getElementsByClassName("menu__item--border")[2].style.marginTop = 'calc( -'+ elmnt2.offsetHeight + "px" +' - 15px)';

}

Есть ли способ повторять для каждого элемента моего класса? Этот код работает для меня, но я стараюсь сделать лучший код из возможных.

Answer 1

Вы можете разбить всю коллекцию на первый, второй и третий элементы:

const [el1, el2, el3] = document.getElementsByClassName("menu__item--link");

Но было бы больше DRY, чтобы вместо этого использовать al oop. Сохраните одну из коллекций в переменной, затем переберите другую коллекцию и проверьте индекс, чтобы получить связанный элемент:

const links = document.getElementsByClassName("menu__item--link")
document.querySelectorAll(".menu__item--border").forEach((border, i) => {
  border.style.height = 'calc(' + links[i].offsetHeight + "px" +' + 6px)'
  border.style.marginTop = 'calc( -'+ links[i].offsetHeight + "px" +' - 15px)';
});

Если у вас более 3 элементов и вам нужно работать только с первым 3, затем нарежьте коллекцию сначала:

[...document.querySelectorAll(".menu__item--border")]
  .slice(0, 3)
  .forEach((border, i) => {