Tengo un padre div con X número de hijos divs. Lo que estoy tratando de hacer es recorrer todos los elementos secundarios y alternar algunos estilos. Por ejemplo (tener 4 divisiones secundarias)
De momento esto es lo que tengo:
$('#fatherDiv > div').each(function() { if ($(this).css("background-color") !== 'red') { $(this).css("background-color", "red"); } });Con este código, puedo recorrer todos los niños, pero parece que la condición if es incorrecta. Supongo que necesito la comparación pero con el niño anterior en lugar del actual, entonces, ¿cómo puedo hacer eso? ¿Y es esto #div > div.each la mejor manera de recorrer los elementos?
Aquí hay un violín para jugar.
Puedes hacer esto con CSS simple sin javascript . Use el selector nth-of-type(odd) & nth-of-type(even) (alternativamente puede usar nth-child(odd) & nth-child(even) ) y asigne el estilo deseado.
Referencias
Pruébalo a continuación.
#fatherDiv > div:nth-of-type(even) { background-color: red; } #fatherDiv > div:nth-of-type(odd) { background-color: green; } <div id="fatherDiv"> <div id="childDiv1"> <h4>Div 1</h4> </div> <div id="childDiv2"> <h4>Div 2</h4> </div> <div id="childDiv3"> <h4>Div 3</h4> </div> <div id="childDiv4"> <h4>Div 4</h4> </div> <div id="childDiv5"> <h4>Div 5</h4> </div> <div id="childDiv6"> <h4>Div 6</h4> </div> <div id="childDiv7"> <h4>Div 7</h4> </div> </div>Podrías hacer esto en CSS usando impar/par en tu selector de niños:
#fatherDiv.alternate :nth-child(even) { background: red; } <div id="fatherDiv" class="alternate"> <div id="childDiv1"> <h4>Div 1</h4> </div> <div id="childDiv2"> <h4>Div 2</h4> </div> <div id="childDiv3"> <h4>Div 3</h4> </div> <div id="childDiv4"> <h4>Div 4</h4> </div> <div id="childDiv5"> <h4>Div 5</h4> </div> <div id="childDiv6"> <h4>Div 6</h4> </div> <div id="childDiv7"> <h4>Div 7</h4> </div> </div>