Как найти «этот» элемент в массиве Vanilla JS

Question

Что у меня есть

<div>
 <div onclick="find(this)" class="grey">1</div>
 <div onclick="find(this)" class="grey">2</div>
 <div onclick="find(this)" class="grey">3</div>
 <div onclick="find(this)" class="grey">4</div>
 <div onclick="find(this)" class="grey">5</div>
</div>

Что мне нравится делать, так это нажимать на <div> (например: <div>...3</div>) и заменять класс для div 3 и всех его предыдущих братьев и сестер ' красный 'и все последующие братья и сестры' серые '.

Я думал, что сработает l oop назад, пока он не достигнет родительского элемента.

То, что я пытался.

function find(ele) {
 var active = ele;
 var previous = active.previousElementSibling;
 var next = active.nextElementSibling;
 var list = [];  // Trying to find a way to push all previous siblings of active into this array
 var i = 0;
 while (i < list){
  next.classList.replace('grey')
  previous.classList.replace('red');
  i++
 }
}

При недостаточных знаниях для выполнения моей функции есть несколько неопределенных, с которыми мне нужна помощь, но после обдумывания эта функция может не сработать, потому что каждый раз, когда функция вызывается, предыдущий брат и сестра возвращаются в серый цвет.

Так есть ли способ заставить это работать?

Как только элементы в массиве списка заменяют класс на красный, а те, которые не в массиве, заменяют на серый.

Спасибо за Ваша помощь, очень ценю, кто бы вы ни были за помощь.

Answer 1

Сначала я бы поместил все цели div в массив. При щелчке найдите индекс выбранного элемента в массиве с indexOf. Затем вы можете .slice массив от индекса 0 до индекса, по которому щелкнули, установив для всех элементов в этом срезе значение red - затем снова .slice, но на этот раз, начиная с индекса, по которому щелкнули, и установить все элементы это срез до grey:

const greys = [...document.querySelectorAll('.grey')];

function find(ele) {
  const index = greys.indexOf(ele);
  greys.slice(0, index + 1).forEach((prevElm) => {
    prevElm.className = 'red';
  });
  greys.slice(index + 1).forEach((nextElm) => {
    nextElm.className = 'grey';
  });
}

.red {
  background-color: red;
}
.grey {
  background-color: yellow;
}

<div>
  <div onclick="find(this)" class="grey">1</div>
  <div onclick="find(this)" class="grey">2</div>
  <div onclick="find(this)" class="grey">3</div>
  <div onclick="find(this)" class="grey">4</div>
  <div onclick="find(this)" class="grey">5</div>
</div>

Также обратите внимание, что встроенные обработчики имеют очень странное поведение , и их следует по возможности избегать. Попробуйте подключить слушателей правильно, используя Javascript вместо:

const greys = [...document.querySelectorAll('.grey')];
greys.forEach((elm) => {
  elm.addEventListener('click', () => find(elm));
});

function find(ele) {
  const index = greys.indexOf(ele);
  greys.slice(0, index + 1).forEach((prevElm) => {
    prevElm.className = 'red';
  });
  greys.slice(index + 1).forEach((nextElm) => {
    nextElm.className = 'grey';
  });
}

.red {
  background-color: red;
}
.grey {
  background-color: yellow;
}

<div>
  <div class="grey">1</div>
  <div class="grey">2</div>
  <div class="grey">3</div>
  <div class="grey">4</div>
  <div class="grey">5</div>
</div>

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

const greys = [...document.querySelectorAll('.grey')];
const container = document.querySelector('div');
container.addEventListener('click', ({ target }) => {
  if (target.parentElement === container) {
    find(target);
  }
});

function find(ele) {
  const index = greys.indexOf(ele);
  greys.slice(0, index + 1).forEach((prevElm) => {
    prevElm.className = 'red';
  });
  greys.slice(index + 1).forEach((nextElm) => {
    nextElm.className = 'grey';
  });
}

.red {
  background-color: red;
}
.grey {
  background-color: yellow;
}

<div>
  <div class="grey">1</div>
  <div class="grey">2</div>
  <div class="grey">3</div>
  <div class="grey">4</div>
  <div class="grey">5</div>
</div>