Usando jQuery cada uno para agarrar la altura de la imagen

Question

Tengo un montón de imágenes en una página. Estoy tratando de usar jQuery para tomar la altura de cada imagen y mostrarla después de la imagen. Así que aquí está mi código:

---

$(document).ready(function() {
  $(".thumb").each(function() {
    imageWidth = $(".thumb img").attr("width");
    $(this).after(imageWidth);
  });
});


<div class="thumb"><img src="" border="0" class="thumb_img"></div>
<div class="thumb"><img src="" border="0" class="thumb_img"></div>
<div class="thumb"><img src="" border="0" class="thumb_img"></div>


[...]

---

Mi lógica detrás de la jQuery es que quiero pasar por cada selector de "pulgar", asignar la altura del IMG dentro de "pulgar" a la variable "anchura de imagen", y luego mostrar la altura en el texto después de cada "pulgar".

El problema que tengo es que solo está funcionando en la primera imagen y luego renuncia. Puedo hacer que funcione si uso la clase "Thumb_img", por supuesto, pero necesito acceso a la altura de la imagen para la clase "pulgar".

Esperemos que esto no sea demasiado confuso ya que soy bastante nuevo en jQuery. Gracias de antemano.

Answer 1

Utilizar este:

imageWidth = $(this).children("img").attr("width")

Lo siguiente selecciona todas sus imágenes:

$(".thumb img")

... Entonces, cuando solicita el atributo, lo devuelve desde el primer objeto en la colección

Perdón por todas las ediciones ... pero es mejor reutilizar objetos jQuery, así que:

var $this = $(this)

Luego, consulte $, esto fue necesario para la optimización. No es un gran problema en este ejemplo, pero es una buena práctica de usar.

Answer 2

No podrá usar document.ready () para hacer esto, ya que las imágenes no se habrán cargado por el momento que se llama.

En realidad, debe poner este código en el controlador de eventos onload (), que se llama después del documento y todas las imágenes han terminado de cargar.

Es solo cuando las imágenes han terminado de cargar que el navegador sabe cuán grandes son.

Answer 3

$().ready(function() {

        $(".thumb img").load(function() {
            var imageHeight = $(this).height();
            $(this).parent().append(imageHeight);

        });

});

Answer 4

He usado algo similar a precargar una imagen y establecer algún código en Mouseover y MouseOut y establecer el estilo para todas las imágenes con un nombre de clase "Swap". Para mi $(this) no funcionó pero directamente this trabajó:

// in jquery
$(document).ready(function(){
        swapAndPreload();
    });

function swapAndPreload(){
    $(".swap").each(function(){
        // preload images in cache
        var img = new Image();
        img.src=this.src.replace(/([-_])out/,'$1over');
        //set the hover behaviour
        this.onmouseover = function(){
            this.src=this.src.replace(/([-_])out/,'$1over');
        }
        //set the out behaviour
        this.onmouseout = function(){
            this.src=this.src.replace(/([-_])over/,'$1out');
        }
        //set the cursor style
        this.style.cursor="pointer";
    });
}