Как получить все элементы с определенным id и применить к ним какую либо функцию?

Question

[godsplane]

Я понимаю вопрос глупый, но я никак не могу получить то что хочу.
У меня есть несколько дивов с айди slide-item

let $slideItem = document.getElementById('slide-item');

Это получает только первый элемент с таким айдишником.
Я проболвал использовать querySelectorAll, но тогда у меня не срабатывает метод 'style' когда я обращаюсь к нему.

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

let sliderLength = document.getElementsByClassName('slider-content_item').length;
let $slideItem = document.getElementById('slide-item');
let slideWidth = $slideItem.offsetWidth
console.log(slideWidth)
let currentSlide = 1;








function nextSlide() {

  if (currentSlide >= sliderLength) {
    $slideItem.style.transform = 'translate(0px)';
    currentSlide = 1
  }
  else {


    $slideItem.style.transform = 'translate(' + (-slideWidth) * currentSlide + 'px' + ')';

    currentSlide++
    console.log(currentSlide)


  }

  console.log($slideItem)
}

Comments

[Kovalsky]

Гуглится достаточно просто

[Сергей Соколов]

Приведите HTML разметку, это поможет. Ещё лучше, сделайте jsFiddle с вашей разметкой и кодом.

Answer 1

[Сергей Соколов]

id обязательно должны быть уникальными. Нельзя использовать один id для нескольких элементов.

Зато className может присутствовать у многих элементов. Назначьте всем слайдам класс slide-item

Upd. примерно так можно, коротко и просто:

Comments

[godsplane]

У меня есть такой класс, но когда я выбираю по классу то та же история что и с querySelectorAll

[godsplane]

и так же я не могу получить значение offsetWidth если пишу так

let $slideItem = document.getElementsByClassName('slider-content_item');
let slideWidth = $slideItem.offsetWidth
console.log(slideWidth)

[Сергей Соколов]

godsplane, offsetWidth – это свойство одного HTML-элемента.
Метод getElementsByClassName() возвращает NodeList - массивоподобную коллекцию HTML элементов. Можете взять свойство у, скажем, самого первого из них:

let slideItems = document.getElementsByClassName('slider-content_item');
let slideWidth = slideItems[0].offsetWidth;

[godsplane]

Сергей Соколов, А если мне нужно высчитывать каждый раз ширину элемента?

[Сергей Соколов]

godsplane, которого по счёту? Его и берите:

let slideWidth = slideItems[currentSlide].offsetWidth;
// currentSlide от 0 до slideItems.length - 1

[godsplane]

Сергей Соколов, нет, изначально. без текущего слайда

[Сергей Соколов]

godsplane, слайдов несколько. Все они лежат в «массиве». В чём проблема обратиться к i-тому элементу массива?

[godsplane]

Сергей Соколов, в том что если ширина слайдов будет разная то они не подвинутся на определнное количество пикселей по формуле которую я написал. Или вы имеете ввиду писать так
slideItems[i] ?

[Сергей Соколов]

очевидно, чтобы двигать, нужно знать суммарную ширину всех слайдов, оказавшихся слева.
Если у вас сейчас виден слайд номер currentSlide (считая от 0), то ширину можно получить так:

offsetWidth = [...slideItems].reduce((prev, curr, i) => i < currentSlide ? prev + curr.offsetWidth : p, 0);

[godsplane]

Сергей Соколов, окей, но это не меняет того факта что у меня typeError если я получаю элемент по классу.
https://jsfiddle.net/6kc7Lm4o/ вот как выглядит этот слайдер.
Я просто хочу понять как мне можно подвинуть сразу несколько слайдов и все

[Сергей Соколов]

godsplane, выше же написал, что slideItems это как массив.
Обновил ответ работающим примером.

Answer 2

[Жук]

document.querySelectorAll('.slider-content_item').forEach((elem) => {
  elem.style .......... 
  // Вот здесь пишешь что тебе нужно сделать, elem это текущий итерируемый элемент, forEach работает как обычный цикл.
});

querySelectorAll найдет все элементы с классом slider-content_item и сделает массив, потом форЫчем можно применять ко всем этим элементам стиль.

Можешь задавать любые вопросы - отвечу.

Comments

[godsplane]

В чем смысл жизни?

[Жук]

godsplane, в создании велосипедов по типу слайдеров

[godsplane]

Жук, как мне можно узнать ширину каждого элемента из этого массива и задать его в переменную?

[Жук]

godsplane, const elementWidth = elem.style.width;

[godsplane]

Жук, slider.js:5 Uncaught TypeError: Cannot read property 'width' of undefine

[godsplane]

Жук, и мне нужно не значение в пикселях а число чтобы я мог проводить с ним математические операции