jQuery math und split, um nur angeforderte Elemente zurückzugeben

Question

Wie erreiche ich dieses Raster mit jQuery und diesen Hintergrund mit der .css() -Methode hinzufügen?

Ich habe versucht, mit eq() oder index() oder filtering() aber ich bin nicht in der Lage nur Elemente zurück, die ich vom Netz benötigen.

Ich muss nur Eckelemente zurückgeben und für die Mitte muss ich jedes Element separat behandeln.

fiddle:

Answer 1

Sie müssen über alle Zellen iterieren und if Anweisung verwenden, um zu überprüfen, welcher Hintergrund an diese Zelle angehängt werden soll. Siehe 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

Sie haben bereits ein Beispiel dafür, wie die erste Ecke gefärbt war. Indem Sie die Indizes der Schleifen ändern, können Sie die anderen Ecken färben.

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

Versuchen Sie, darüber nachzudenken, wie Sie auf die 4 mittleren Zellen zugreifen und jeder von ihnen ihre eigene Farbe geben.

Sie können sich die Jfiddle mit vier farbigen Ecken hier anschauen: https://jsfiddle.net/wzztoch8/.

Answer 3

würde ich persönlich eine Funktion erstellen, hier zu helfen -> zB.

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');