Перебор массива циклом for с целью обращения ко всем остальным элементам кроме i-го?

Question

[Михаил]

Всем привет!
Как при переборе коллекции элементов циклом for
обратиться ко всем остальным, кроме i-го элемента ?

let arr = document.querySelectorAll('.item');
for ( let i=0;  i<arr.length; i++ ){
      arr[i].style = 'background:red';
      arr[ все остальные элементы ].style = 'background:green';
};

Или может для этой цели использовать не for , а другой цикл ?

Comments

[irishmann]

Может стоит объяснить цель такого подхода, что вы в итоге хотите получить?

[Михаил]

мне нужно чтобы только i элемент окрасился , а остальные - нет. Там при клике есть еще проверки на наличие классов , и в зависимости от этого всего, при каждом клике должен i элемент поменяться одним образом, а все остальные - другим.

[Rustam Azizov]

Михаил, лучше опишите задачу так, как объяснили бы её человеку не понимающему программирование. Типа «я хочу, чтоб при нажатии на кнопку она подкрашивалась зелёным цветом». Из ваших объяснений создаётся впечатление, что вы не с того конца начали решать задачу, поэтому и не понятно что советовать.

Answer 1

[hzzzzl]

arr[i].style = (i === 13) ? 'background:red' : 'background:green'

Comments

[Михаил]

Этот вариант работает хорошо.
Но когда я пытаюсь поставить присвоение классов вместо стилей, то что-то не выходит
вот тут пример
https://codepen.io/mk3mk/pen/XWWOvea?editors=0010

Answer 2

[Афанасий Захаров]

Расскажите, какую задачу вам надо решить.
что-то типа прогресс бара, как я понимаю?

Самый простой вариант, который чуть более правилен с точки зрения алгоритмики

let arr = document.querySelectorAll('.item');
arr.forEach((elem)=>{
  elem.style = "background: green";
});
 arr[0].style = 'background:red';
for ( let i=1;  i<arr.length; i++ ){
      arr[i].style = 'background:red';
      arr[i-1].style = 'background:green';
};

Comments

[Михаил]

вообще сама задача вот тут
https://codepen.io/mk3mk/pen/XWWOvea?editors=0110

там есть три блока с текстом, и кнопки якорные ссылки.
Сделано, чтобы при клике на якорную ссылку кнопку происходил переход к якорю.
А я еще хочу сделать , чтобы при этом соответствующий блок текста как бы открывался , а остальные частично скрывались (там это уже задано стилями, осталось только в скрипте правильно это реализовать ), т.е. присваивание активному блоку класса visible , а остальным not-visible

Answer 3

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

Можно проверять, равен ли очередной кандидат – кликнутому элементу:

const onClick = event => {
  const nodeList = document.querySelectorAll('.item');
  for (let i=0;  i<nodeList.length; i++ ) {
    nodeList[i].style = (nodeList[i] === event.target ? 'background:red' : 'background:green');
  };
}

Лучше не пихать инлайн стили, а обойтись классами:

.item {background: green } // по умолчанию все зелёные
.item-red {background: red } // тот самый

используя classList

// clickedEl — item, по которому кликнули
[...document.querySelectorAll('.item')].forEach(el => {
  if (clickedEl === el) el.classList.add('item-red');
  else el.classList.remove('item-red');
});

Comments

[Михаил]

интересный вариант! Но что-то не получается с ним разобраться

вот тут пример
https://codepen.io/mk3mk/pen/xxxBbjj?editors=0010

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

Михаил, просто вы скопировали, не разбираясь. СТрочка для пояснения (// item, по которому кликнули) - была не закрыта точкой-с-запятой.