Как обработать насколько предыдущих и следующих элементов массива?

Question

[uRoot]

Есть массив. Мне нужно обработать 4 предыдущих и 4 следующих элемента навесив на них класс. Исключением должны быть первый и последний элемент массива - их обрабатывать ненужно.

Сейчас я пробую так:

button.find((element, index) => {
                if (element.matches(".-js-active")) {
                    button[index+1]?.classList.add("-js-visible")
                    button[index+2]?.classList.add("-js-visible")
                    button[index+3]?.classList.add("-js-visible")
                    button[index+4]?.classList.add("-js-visible")
                    //
                    button[index-1]?.classList.add("-js-visible")
                    button[index-2]?.classList.add("-js-visible")
                    button[index-3]?.classList.add("-js-visible")
                    button[index-4]?.classList.add("-js-visible")
                } else {
                    if (element.matches(".page-go:not(.-js-last):not(.-js-first)")) {
                        element.classList.remove("-js-visible")
                    }
                }
            })

Но это работает не правильно. Так же мне бы хотелось избавиться от перечисления button[index-N] и button[index+N].

UPD: было бы здорово уместить всё в один перебор массива. А то у меня есть вариант с двумя:

вариант 2

button.forEach((element, index) => {
                if (element.matches(".page-go.-js-visible:not(.-js-last):not(.-js-first)")) {
                    element.classList.remove("-js-visible")
                }
            })
            
            button.find((element, index) => {
                if (element.matches(".-js-active")) {
                    button[index+1]?.classList.add("-js-visible")
                    button[index+2]?.classList.add("-js-visible")
                    button[index+3]?.classList.add("-js-visible")
                    button[index+4]?.classList.add("-js-visible")
                    //
                    button[index-1]?.classList.add("-js-visible")
                    button[index-2]?.classList.add("-js-visible")
                    button[index-3]?.classList.add("-js-visible")
                    button[index-4]?.classList.add("-js-visible")
                }
            })

Comments

[Дмитрий]

Мне нужно обработать 4 предыдущих и 4 следующих элемента

Предыдущих чему и следующих за чем?

[Сергей Сергей]

функция find применена неправильно.

let actind = button.findIndex( el => el.matches('-js-active') );
button.slice( 1, -1 )
  .filter( ( el, i ) => ( i >= actind - 4 && i <= actind + 4 ) )
  .forEach( el => el.classList.add( '-js-visible' ) )

и хватит уже карусельки придумывать.

тут ещё косяк с индексами.

[uRoot]

Дмитрий, от текущего, который имеет класс -js-active

[uRoot]

Сергей Сергей,

и хватит уже карусельки придумывать.

Что такое "карусельки"?

[Дмитрий]

CryNet, он один?

[Сергей Сергей]

Слайдеры, галереи.

[Дмитрий]

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

[Дмитрий]

let actind = button.findIndex( el => el.matches('-js-active') );
button.slice(Math.max(1, actind - 4), Math.min(button.length - 2, actind + 4)).forEach(
  el => el.classList.add( '-js-visible' )
)

[uRoot]

Сергей Сергей, а-а-а, это не слайдер.

[uRoot]

Дмитрий, да, он всегда один

[Дмитрий]

CryNet, Посмотрите мой вариант, где я переделал вариант Сергея, его вариант в целом верен, но немного неоптимален и с индексами ошибка.

[Сергей Сергей]

Дмитрий, max/min как-то мне не вспомнилось, что-то про сравнение с нулём и длиной в голове застряло.

[Дмитрий]

Сергей Сергей, Напишите этот вариант в ответах, ТС отметит его как решение, чтобы тему закрыть

Answer 1

[Арсений Матыцин]

Для работы с DOM хватает интерфейса работы с DOM: https://vk.cc/awd12n