Ordenar div con nth:child css

Muy buenaaas!! Estoy seguro que más de uno se ha visto en esta tesitura. Sobre todo por tener que pelearse con algún código infumable de plugins, themes, etc, que no hay por donde pillarlo y modificar o meter ID´s a esos div para luego ordenarlos bien. El típico margen que si se lo metes afecta a todos y no se puede ajustar a la perfección.

Pues bien, de las primeras cosas que se me pasó, digo, con nthchild de css y listo. Pero NO. No se puede hacer eso con elementos div. Total que a crujirse la cabeza y buscar mil y una soluciones. Os doy la que conseguí por fin. Si alguien sabe alguna mejor que la comparta.

Primero. Convertir esos malditos div en Li, y así poder aprovechar el selector nth:child . Como ¿? Con jquery. Y esto también me dio unos cuantos dolores de cabeza. Y mira que no era complicado, pero lo típico, te vas por otras vías y no sale justo lo que quieres. Aquí lo teneis

<script>
jQuery(function(){
 
 
jQuery('div.clasedenuestrodiv').each(function(){
 
    jQuery(this).replaceWith( "<li>" + jQuery(this).html() + "</li>" );
});
 
});
 
</script>

Vale. Supersencillo. Hay muchas soluciones por internet pero todas lo hacían cogiendo el contenido de ese div también, y claro… como los div tengan diferente contenido pero la misma clase pues ya la hemos liao.

Ya hemos cambiando el elemento. Así que ahora sí. Vamos con el css.

 
div.clasedeldiv li:nth-child(even){    margin-left: 46px;}

Luego las mil cosas que cada uno tenga que poner, pero la base esa, “even” en mi caso para hacerlo con los elementos pares. Ni que decir tiene que el jQuery anterior sirve para cambiar cualquier tipo de elementos, no solo un div por un Li.

Espero que os sirva.

Add Comment

Required fields are marked *. Your email address will not be published.