Jquery – Cómo alternar un: Impar: ¿un patrón par cada 4 ?

Estoy tratando de hacer un patrón en un diseño (ver adjunto para visualización) El problema es que usar: impar: incluso no funciona.

He intentado hacer que funcione con “for loops”, y si es enunciados, pero obviamente jquery no hace esto de esa manera. ¿O tal vez se supone que debo hacerlo fuera de la statement del documento listo? Me cansé de eso, pero simplemente no funciona.

¿Cómo hace uno para eso?

EDITAR: Nota importante … Estos cuadrados tienen un máximo de 8 en una página y se generan en WordPress, cada cuadrado es una publicación. Así que no puedo dividir las cosas en filas como se sugiere, desafortunadamente.

css:

.thumb_container { width:274px; height: 274px; float: left; position: relative; background-color: white; } .thumb_container:nth-child(4n+1) { clear:both; background-color: green } /* green just to see if its working */ 

Archivo de tweek de Jquery ( http://baked-beans.tv/bb/wp-content/themes/bakedbeans/js/jquery.site.tweeks.js )

  $(".thumb_container:nth-child(8n+2), .thumb_container:nth-child(8n+4), .thumb_container:nth-child(8n+5), .thumb_container:nth-child(8n+7)") .css({"background-color":"#333333"}); 

HTML Haga clic en HTML para el enlace

cambiar

 var i = 1; $('#wrapper > div').each(function() { var isEvenRow = Math.ceil(i / 4) % 2 == 0; // 4 is number of columns var isCellAlternate = i % 2 == isEvenRow ? 0 : 1; if ( isCellAlternate ) { $(this).css("background-color", "#000"); } else { $(this).css("background-color", "#ccc"); } i++; });​ 

o la versión menos legible pero más corta:

 var i = 1; $('#wrapper > div').each(function() { if (i % 2 == (Math.ceil(i / 4) % 2 == 0) ? 0 : 1) $(this).css("background-color", "#000"); else $(this).css("background-color", "#ccc"); i++; });​ 

Básicamente, cambias la prueba de la celda alternativa en cada fila.

Puedes hacer algo como esto

 $("#wrapper > :nth-child(8n+1), #wrapper > :nth-child(8n+3), #wrapper > :nth-child(8n+6), #wrapper > :nth-child(8n+8)").addClass('dark'); 

con este HTML:

 
... 16 divs

y este CSS:

 #wrapper { width: 160px; border: 1px solid #999; overflow: hidden; } #wrapper div { width: 40px; height: 40px; float: left; background-color: #fff; } #wrapper .dark { background-color: #f5f5f5; } 

Usar una envoltura aquí ayuda para que no necesite agregar una clase a cada div , y definitivamente no necesita dos clases o colores diferentes; simplemente defina un color ‘predeterminado’ y luego anúlelo con una clase agregada. Ah, y los selectores :odd , :even y nth-child funcionan en los elementos a los que están unidos, en su caso, el elemento .thumb_container . .thumb_container > :even funcionaría, para futuras referencias.

Eche un vistazo al código actual aquí: http://jsfiddle.net/HjMrx/

No está seguro de cómo va su marca, pero puede usar el selector : nth-child (n) para lograr un efecto de tablero de ajedrez. He establecido un ejemplo para usted aquí . No estoy seguro de cuán eficiente será, aunque parece lo suficientemente rápido para una cuadrícula de 4×4.

 $("div:nth-child(8n+2),div:nth-child(8n+4),div:nth-child(8n+5),div:nth-child(8n+7)") .css({"background-color":"white"});​ 

Esto repite un patrón el 2, 4, 5 y 7 cada 8 divs (8n). Si tiene una cuadrícula de tamaño diferente, tendrá que ajustar estos selectores (y agregarlos).

Es mucho más simple si está utilizando una tabla – ejemplo :

 $("tr:odd > td:even, tr:even > td:odd").css({"background-color":"white"});​ 

Si está dispuesto a usar divs de envoltura, puede usar la técnica de filas, envolver cada 4 divs en una div externa y usar:

 
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
 $(".row:odd > div:even, .row:even > div:odd").css({"background-color":"white"});​ 

otra forma de hacerlo sería [no está probado para la función pero demuestra la lógica]:

  $('div').click(function(e){ $tester=$(this).children('div.Other').size(); for(var $j=0;$j<$tester;$j=$j+1){ if($j%2==0){ $(this).children().eq($j).css(...); }else{ $(this).children().eq($j).css(...); } } }); 

Hola todo esto me está volviendo loco.

Además, lo que no obtengo sobre Stack Overflow, por genial que sea, es que no puedes mostrar nuevas alternativas a la misma pregunta … Como cuando respondes, no puedes poner un ejemplo de código nuevo allí si eres ¿El que hace la pregunta? ¿Qué me estoy equivocando aquí?

Así que ahora estoy respondiendo mi pregunta, pero en realidad no, solo estoy mostrando el problema de una manera nueva.

De todos modos, estoy intentando esto de todas las maneras posibles, sin suerte, realmente agradecería algo de ayuda aquí. Echa un vistazo a la página en cuestión aquí http://baked-beans.tv/bb

Debería estar haciendo una cuadrícula como se muestra en la primera publicación de este hilo, pero no está alternando como debería.

El: nth-child (4n + 4) funciona cuando uso jsfiddler pero no cuando lo hago en wordpress, ese es el dilema. ¿Por qué wordpress lo estropearía?

  function oddRow() { $(".thumb_container:odd").css("background-color", "#f00"); $(".thumb_container:even").css("background-color", "#fff"); }; function evenRow() { $(".thumb_container:odd").css("background-color", "#fff"); $(".thumb_container:even").css("background-color", "#f00"); }; $('.thumb_container').each(function(i) { i=(i+1); if (i%4==0 ){ if (switchMe == false){ switchMe = true; } else if (switchMe == true){ switchMe = false; } } if (switchMe == false){ oddRow(); $(this).css("background-color", "#000"); } else if (switchMe == true){ evenRow(); $(this).css("background-color", "#000"); } }); 

Esto se puede hacer en 2 líneas de jQuery.

Aquí está el formato HTML que utilicé para esto:

 

CSS:

 #container { width: 816px; margin: 0 auto; } #container .row div { width: 100px; height: 100px; float: left; background: #fff; border: 1px solid black; } .dark { background: #000 !important; } 

jquery

 $(document).ready(function() { $("#container .row:nth-child(even) div:nth-child(even)").addClass("dark"); $("#container .row:nth-child(odd) div:nth-child(odd)").addClass("dark"); }); 

Esto le indica que establezca una clase de oscuridad para cada div incluso en cada fila par y que establezca esa clase en los divs impares en las filas impares.