Javascript выбрать все окружающие элементы

Question

Возможно ли это, используя только JavaScript?

По существу я 25 divs с классом .cell и в самом центре DIV содержит текст: «O»

Я хочу, чтобы перебрать все клетки и изменить цвет фона любой ячейки, которая сразу окружает ячейка с innerHTML "о"

Я знаю, что могу проверить previousSibling и nextSibling

for (var i = 0;i < 25; i++) { 
    if (cell[i].innerHTML == "O") { 
     cell[i].previousSibling.style.backgroundColor = "#000" 
     cell[i].nextSibling.style.backgroundColor = "#000" 
    } 
} 

Мой вопрос: Как я могу выбрать вышерасположенного брата, ниже брата и/или диагональных братьев и сестер?

Вот моя скрипка http://jsfiddle.net/xamte3fa/2/

Answer 1

Если вы знаете, матрица 5х5, которые вы, кажется, знаете, из кода, который создает его и правила ширины CSS, то вы можете рассчитать индекс окружающих клеток на основе знания размер матрицы.

Например, ячейка непосредственно выше будет индекс ячейки с «O» в ней минус ширина которого 5.

var cellAbove = index - 5; 
var cellLeft = index - 1; 
var cellRight = index + 1; 
var cellBelow = index + 5; 

Вы, конечно, должны проверить пределы всех этих в случае, если ячейка с «O» находится на ребре.

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

function highlightSurrounding() { 
    var cells = document.querySelectorAll(".cell"); 
    for (var i = 0; i < cells.length; i++) { 
     if (cells[i].innerHTML === "O") { 
      // found a target 
      var results = calcNeighbors(i, 5, 5); 
      var bordered = results.bordered; 
      var diagonals = results.diagonals; 
      for (var dir in bordered) { 
       if (bordered[dir] !== null) { 
        cells[bordered[dir]].style.backgroundColor = "#F00"; 
       } 
      } 
      for (var dir in diagonals) { 
       if (diagonals[dir] !== null) { 
        cells[diagonals[dir]].style.backgroundColor = "#0F0"; 
       } 
      } 

     } 
    } 
} 

// this is where the neighbor indexes are calculated 
// and bounds-checked 
// returns an object with two objects in it where each 
// object has an index number for each direction or null if that neighbor 
// doesn't exist 
function calcNeighbors(index, matrixWidth, matrixHeight) { 
    var bordered = {}; 
    bordered.above = index >= matrixWidth ? index - matrixWidth : null; 
    bordered.below = index + matrixWidth < matrixWidth * matrixHeight ? index + matrixWidth : null; 
    bordered.left = index % matrixWidth !== 0 ? index - 1 : null; 
    bordered.right = (index + 1) % matrixWidth !== 0 ? index + 1 : null; 

    // now calc diagonals 
    var diagonals = {upLeft: null, upRight: null, belowLeft: null, belowRight: null}; 
    if (bordered.left !== null && bordered.above !== null) { 
     diagonals.upLeft = bordered.above - 1; 
    } 
    if (bordered.left !== null && bordered.below !== null) { 
     diagonals.belowLeft = bordered.below - 1; 
    } 
    if (bordered.right !== null && bordered.above !== null) { 
     diagonals.upRight = bordered.above + 1; 
    } 
    if (bordered.right !== null && bordered.below !== null) { 
     diagonals.belowRight = bordered.below + 1; 
    } 


    return {bordered: bordered, diagonals: diagonals}; 
} 

highlightSurrounding(); 

Работа демо: http://jsfiddle.net/jfriend00/zmkq9ejo/

---

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

Answer 2

Лучше абстрагируйте свое требование к матричной модели. Как сказал выше ответчик, вычислите индексированные целевые divs;

то вы можете получить массив целевых индексов;

тогда, если с jquery, он может просто удовлетворить ваши потребности.

var indexes = [2,3,4...]; //the result indexes 
var cells = $('.cell'); 
$.each(indexes, function(i, index) { 
    cells.eq(index).css(...); //your styling code here 
}); 

Если вы настаиваете на том, чтобы не использовать jquery, измените приведенный выше код немного, и все будет в порядке.