[SOLUCIONADO] Seleccionar varios elementos con la misma clase

[jorgecanto]

Hola.

En mi página tengo una serie de divs que quiero que tengan una altura proporcional al ancho del propio div. Para esto imagino que primero debo extraer el ancho de cada elemento con javascript y después aplicarle el mismo alto.

Este es mi código html:

Código HTML:

<div class="grid">
          <a href=""><div class="box size1" style="background-image: url('img/01.jpg');"></div></a>
          <a href=""><div class="box size2" style="background-image: url('img/21.jpg');"></div></a>
          <a href=""><div class="box size2" style="background-image: url('img/15.jpg');"></div></a>
          <a href=""><div class="box size3" style="background-image: url('img/07.jpg');"></div></a>
          <a href=""><div class="box size4" style="background:#fff;"></div></a>
          <a href=""><div class="box size5" style="background-image: url('img/27.jpg');"></div></a>
          <a href=""><div class="box size2" style="background-image: url('img/35.jpg');"></div></a>
          <a href=""><div class="box size1" style="background-image: url('img/32.jpg');"></div></a>
          <a href=""><div class="box size6" style="background-image: url('img/33.jpg');"></div></a>
          <a href=""><div class="box size5" style="background-image: url('img/26.jpg');"></div></a>
          <a href=""><div class="box size4" style="background-image: url('img/24.jpg');"></div></a>
        </div>
 

El código CSS para estos elementos:

Código CSS:

/* PORTFOLIO GRID */
.grid .box {
  background-size:cover;
  background-position:center center;
}
.size1 {
  width:50%;
  height:800px;
  float:left;
}
.size2 {
  width:50%;
  height:400px;
  float:left;
}
.size3 {
  width:100%;
  height:400px;
  background-position:center left !important;
  float:left;
}
.size4 {
  width:35%;
  height:400px;
  float:left;
}
.size5 {
  width:65%;
  height:400px;
  float:left;
}
.size6 {
  width:50%;
  height:400px;
  margin-top:-400px;
  float:left;
}
 

Y el código javascript:

Código Javascript:

function postControl() {
 
      var width1 = $(".size1").width();
      var elemento1 = document.querySelector(".size1");
      elemento1.style.height = width1 + "px";
 
      var width2 = $(".size2").width();
      var elemento2 = document.querySelector(".size2");
      elemento2.style.height = width1 * 0.5 + "px";
 
      var width3 = $(".size3").width();
      var elemento3 = document.querySelector(".size3");
      elemento3.style.height = width3 * 0.35 + "px";
 
      var width4 = $(".size4").width();
      var elemento4 = document.querySelector(".size4");
      elemento4.style.height = width4 * 0.928 + "px";
 
      var width5 = $(".size5").width();
      var elemento5 = document.querySelector(".size5");
      elemento5.style.height = width5 * 0.5 + "px";
 
      var width6 = $(".size6").width();
      var elemento6 = document.querySelector(".size6");
      elemento6.style.height = width6 * 0.5 + "px";
      elemento6.style.top = width6 * 0.5 + "px";
 
  };
 

El javascript funciona perfectamente. El problema es que en dos elementos con la misma clase, solo funciona con el primero. Esto pasa en todos los elementos que se repiten.

¿Existe alguna forma de conseguir que cada parte del javascript aplique a todos los elementos de la misma clase?

[mpozo]

En lugar de usar querySelector(), usa querySelectorAll() https://developer.mozilla.org/es/doc...erySelectorAll

Pd.- Es raro que empieces usando la librería jquery y después dejes de usarla

[jorgecanto]

Al cambiar querySelector() por querySelectorAll() no me funciona en ninguno. Sobre lo de usar la librería y dejar de hacerlo, soy algo novato en este tema y tengo un mezclado de lo que he ido recopilando por algunos posts jeje.

[mpozo]

No se trata de hacer

Código Javascript:

var elemento1 = document.querySelectorAll(".size1");
 

Lee la documentación y lo entenderás. Pero antes de nada decide si usar una librería o javascript nativo. Después trabaja en el html. Un elemento en línea <a> no puede ser contenedor de un elemento de bloque <div>

[jorgecanto]

Hola mpozo. He conseguido que funcione, gracias por la ayuda.

Sobre lo del elemento <a> conteniendo un elemento <div>. Si es tan mala práctica, ¿Por qué páginas como facebook lo utilizan?

[mpozo]

¿Quién dice que facebook sea un ejemplo de buenas prácticas?
https://developer.mozilla.org/es/doc..._vs._en_bloque
http://www.psdahtmlpasoapaso.com/blo...ne-fundamental

[siddartha23]

En html5 no es mala práctica colocar elementos dentro de una etiqueta <a> siempre y cuando ninguno de esos elementos sea interactivo como por ejemplo colocar otra etiqueta <a> o un botón:

https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

[mpozo]

Ya sé algo más de HTML. Habría que plantearse como afecta al SEO, que no siempre va de la mano con las especificaciones de HTML

[siddartha23]

He leído acerca del "depth limit" que tienen los rastreadores web (web crawlers), pero esto tiene que ver con el número de páginas que un robot escanea desde el root de la web. Lo que no encuentro es ningún tipo de información que me diga que el robot al encontrar un enlace va dejar de tomar en cuenta las etiquetas que se encuentran dentro, lo que podría tener sentido tomando en cuenta las antiguas especificaciones, pero no se menciona en ningún lado (o tal vez debo averiguar más)...