Как сделать перебор соседних элементов по «кругу»?

Question

[Masonry]

Всем привет, есть Код суть такова, чтобы при клике на какую то ячейку подсветить те ячейки которые находятся в таком образном круге той ячеки по которой кликнули. У меня тут сейчас только подствечиваются те ячейки которые слево и справо.

Answer 1

[DTX]

Ну почему jsfiddle???
codepen.io/anon/pen/rrNOdm

Comments

[Masonry]

DTX просто привык туда уже постить все. Спасибо то что надо, более подробно сейчас это все разберу. Подскажите пожалуйста как вот это выражение на чистом js написать $('i[data-row='+y+'][data-index='+x+']').addClass('hl'); ?

[DTX]

Masonry: Document.querySelectorAll('i[data-row='+y+'][data-index='+x+']'). А потом в цикле класс добавить

[Masonry]

DTX: вот посмотрите пожалуйста, ошибку в консоль выдает https://jsfiddle.net/baqb1gvg/1/

[DTX]

Masonry: https://jsfiddle.net/baqb1gvg/2/
Плюс там ещё цикл корявый был..

[Masonry]

DTX: спасибо большое!

Answer 2

[GreatRash]

Допустим координаты ячейки в массиве:
(x, y)

Соседи:
Л (x - 1, y)
П (x + 1, y)
В (x, y - 1)
Н (x, y + 1)
ЛВ (x - 1, y - 1)
ПВ (x + 1, y - 1)
ЛН (x - 1, y + 1)
ПН (x + 1, y + 1)

Comments

[Masonry]

GreatRash то есть мне сначало добавить вот эти значение в массив:
'indexCell = +this.getAttribute('data-index')+1,
indexRow = +this.getAttribute('data-row')+1; ?

[Masonry]

GreatRash может саму логику рассказать ?

[GreatRash]

Masonry: https://jsfiddle.net/xtnog0sm/

[Masonry]

GreatRash: спасибо !

Answer 3

[Олег]

Загугли скрипт сапера, минера и разбери