jQuery math и split, чтобы возвращать только запрошенные элементы

Question

Как достичь этой сетки с помощью jQuery и добавить этот фон с использованием метода .css()?

Я пробовал использовать eq() или index() или filtering(), но я не могу вернуть только те элементы, которые мне нужны из сетки.

Мне нужно вернуть только угловые элементы, а для середины мне нужно возвращать каждый элемент для лечения отдельно.

fiddle:

Answer 1

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

/* 
    Here are some global variables 
    c - Array of rows in the table 
    x - Temporary x-coordinate used in loop (left is 0, right is c.length - 1) 
    y - Temporary y-coordinate used in loop (top is 0, bottom is c.length - 1) 
    c1 - Distance from x-axis translated to center of the table 
    c2 - Distance from y-axis translated to center of the table 
    cols - An array of RGB colors 
*/ 
var c = $('.row'), x, y, c1, c2, 
    cols = [ 
    135, 203, 205, 
    235, 164, 158, 
    197, 191, 88, 
    214, 117, 165 
    ]; 

// Iterate over all cells 
for(y = 0; y < c.length; y++) for(x = 0; x < c.length; x++){ 
    // Calculate x-distance and y-distance from the center 
    c1 = Math.abs(x - 2.5); 
    c2 = Math.abs(y - 2.5); 

    // If we are in the corner, color it in one way 
    if(c1 > 1 && c2 > 1) x < 3 ? setBg(x, y, 166, 233, 197) : setBg(x, y, 168, 156, 197); 
    // Otherwise use `cols` variable 
    else if(c1 < 1 && c2 < 1) setBg(x, y, cols.shift(), cols.shift(), cols.shift()); 
} 

// This function set background to cell at (x, y) from RGB value 
function setBg(x, y, r, g, b){ 
    c[y].children[x].style.background = 'rgb(' + r + ',' + g + ',' + b + ')'; 
} 

Answer 2

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

for (var i = 0; i < c.length - 4; i++) { 
    for (var j = 0; j < c.length - 4; j++) { 
    ... 
    } 
} 

Подумайте, как получить доступ к 4 средним ячейкам и дать каждому из них свой цвет.

Вы можете посмотреть jsfiddle с четырьмя цветными углами здесь: https://jsfiddle.net/wzztoch8/.

Answer 3

Я бы лично создать функцию, чтобы помочь здесь -> например.

function fill(x1,y1,x2,y2,color) { 
    $('.row:nth-child(n+'+y1+'):nth-child(-n+'+y2+ 
    ') span:nth-child(n+'+x1+ 
    '):nth-child(-n+'+x2+')') 
    .css({"background-color":color}) 
} 

fill(0,0,2,2,'#00ffcc'); 
fill(0,5,2,6,'yellow');