0

Me gustaría saber el tamaño de cada elemento que tiene la clase .zonaDropeo, para más tarde modificar su height. La cosa es que cuando recupero el id del primer elemento de la colección de elementos con la clase .zonaDropeo, sí me permite saber su width, pero cuando recorro cada elemento de la colección y a accedo a cada uno de ellos para saber su ancho, me da error.

Me funciona así:

zonaDropeo = $("#zonaDropeo1")
tamaño = zonaDropeo.width();
console.log(tamaño)

Pero me deja de funcionar así:

var zonasDropeo = $(".zonaDropeo");


zonasDropeo.each(function(){
    elemento = this;
    tamaño = elemento.width();
    console.log(tamaño)
})

//O de ésta forma:

for (var i=0; i<zonasDropeo.length; i++){
    var elemento = zonasDropeo[i];
    var tamaño = elemento.width();
    console.log(tamaño);
}

Y otra consulta más: por qué cuando recupero el id del elemento con JQuery y luego aplico el método .width() sí funciona pero en cambio cuando recojo el elemento utilizando código Javascript no?

De ésta forma me da error:

zonaDropeo = document.getElementById("zonaDropeo1")
tamaño = zonaDropeo.width();
console.log(zonaDropeo)

¿No se puede utilizar una función propia de la librería de JQuery a un elemento llamado con código Javascript?

1 respuesta 1

2

Primera parte:

La diferencia que hay entre recuperar un elemento por id y uno por class es que en el primer caso se toma sólo un elemento, en cambio en el segundo se toma un array de elementos, pero cuando se recorre este array lo que contiene no son objetos jQuery, por lo que no conocen la función .width() que es propia de jQuery. Para convertir los elementos a objetos jQuery debes envolverlos en la llamada $(), de esta forma tendrás disponible toda la api de jQuery correspondiente a ese elemento:

let zonasDropeo = $(".zonaDropeo");
zonasDropeo.each(function() {
  let elemento = $(this);
  let tamaño = elemento.width();
  console.log(tamaño);
});

Segunda parte de la pregunta: Como se explica en la parte anterior .width() pertenece a la librería jQuery, por lo que no está disponible en JavaScript vas a tener que usar otra cosa como .clientWidth o .offsetWidth:

let zonasDropeo = document.getElementsByClassName("zonaDropeo");

for (let i = 0; i < zonasDropeo.length; i++) {
  let elemento = zonasDropeo[i];
  let tamaño = elemento.clientWidth;
  console.log(tamaño);
  let tamaño2 = elemento.offsetWidth;
  console.log(tamaño2);
}

Cada uno tiene sus características, podés leer más acá: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

6
  • La pregunta también es: por qué puedo recuperar el tamaño de un elemento seleccionándolo por su ID, pero en cambio cuando se trata de una colección de elementos cuya clase es la misma, utilizando un bucle, no me deja. Ésto que te comento está reflejado en mi pregunta, para que puedas ver el código de ejemplo de lo que te digo. Commented el 14 ene. 2019 a las 6:15
  • La primera parte de la respuesta responde a eso, quizá no está bien redacta, más tarde la edito.
    – ramirozap
    Commented el 14 ene. 2019 a las 7:21
  • 1
    respuesta editada, espero que sea más claro ahora
    – ramirozap
    Commented el 14 ene. 2019 a las 8:59
  • 1
    Ahora ya me quedó claro... Genial respuesta. Gracias por tu ayuda. Commented el 14 ene. 2019 a las 10:15
  • Una consulta, se podría recorrer una colección de elementos con la misma clase sin el .each() sino con un bucle for/forEach/for in? Y poder comprobar el width de cada elemento sin que de error? :') Commented el 14 ene. 2019 a las 11:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.