const containers = [...document.querySelectorAll('.col')]
class SpanWeakMap extends WeakMap {
addItems (...items) {
items.forEach((e) => this.set(e, items))
}
classListAdd (e, ...className) {
this.get(e)?.forEach((item) => item.classList.add(...className))
}
classListRemove (e, ...className) {
this.get(e)?.forEach((item) => item.classList.remove(...className))
}
}
const spanMap = new SpanWeakMap(/* span:[left.span, right.span, ...], ... */)
// Сопоставление - каждый элемент будет ссылаться на все родственные
function collect () {
const cs = containers.map((col) => [...col.querySelectorAll('span')])
cs[0].forEach((_, i) =>
spanMap.addItems(...cs.map((_, ic) => cs[ic][i])))
}
collect()
// Наблюдаем за обновлением коллекций - добавление/удаление элементов(не обязательо если <div class=".col"> не меняется
const observe = (() => {
let tid = null
const update = () => {
clearTimeout(tid)
tid = setTimeout(collect, 100)
}
return (con) => new MutationObserver(update).observe(con, { childList: true })
})()
// Навешиваем обработчики на все ".col"
containers.forEach((con) => {
observe(con)
// Можно не проверять на тег SPAN, наш SpanWeakMap сам все проверит
con.addEventListener('mouseover', ({ target }) => spanMap.classListAdd(target, 'hovered', 'color-white'))
con.addEventListener('mouseout', ({ target }) => spanMap.classListRemove(target, 'hovered', 'color-white'))
})
// +++ Только для эксперимента обновления коллекций +++
// Пробуем добавить/удалить элементы каждые 2 сек
void (() => {
const count = 2
const add = () => {
const last = containers[0].querySelector('span:nth-last-child(-n+1)')
const newElements = (num) => Array(count).fill(null).map(() => {
const e = last.cloneNode(true)
e.classList.remove('hovered', 'color-white')
e.textContent = last.textContent.replace(/\d/, num++)
return e
})
const num = Number.parseInt(last.textContent.match(/\d/)[0]) + 1
containers.forEach((col) => col.append(...newElements(num)))
}
const remove = () => {
const lastItems = [...containers[0].querySelectorAll(`span:nth-last-child(-n+${count})`)]
lastItems.forEach((item) => spanMap.get(item)?.forEach((e) => e.remove()))
}
let invert = false
setInterval(() => ((invert = !invert) ? add() : remove()), 2000)
})()
.col {
background: #e5e5e5;
width: 30%;
display: inline-block;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
span {
display: block;
}
.hovered {
background: red;
}
.color-white {
color: white;
}
<div class="left-part col">
<span>Слово 1</span>
<span>Слово 2</span>
<span>Слово 3</span>
<span>Слово 4</span>
</div>
<div class="right-part col">
<span>Слово 1</span>
<span>Слово 2</span>
<span>Слово 3</span>
<span>Слово 4</span>
</div>
<div class="some-part col">
<span>Слово 1</span>
<span>Слово 2</span>
<span>Слово 3</span>
<span>Слово 4</span>
</div>