Usando jQuery cada para pegar a altura da imagem

Question

Eu tenho várias imagens em uma página. Estou tentando usar o jQuery para pegar a altura de cada imagem e exibi -la após a imagem. Então aqui está o meu 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>


[...]

---

Minha lógica por trás do jQuery é que eu quero passar por cada seletor de "polegar", atribuir a altura do IMG dentro do "polegar" à variável "ImageWidth" e, em seguida, exibir a altura no texto após cada "polegar".

O problema que estou tendo é que ele está funcionando apenas na primeira imagem e depois desistir. Eu posso fazê -lo funcionar se eu usar a classe "Thumb_img", é claro, mas preciso de acesso à altura da imagem para a classe "Thumb".

Espero que isso não seja muito confuso, pois sou bastante novo no JQuery. Antecipadamente grato.

Answer 1

Usa isto:

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

O seguinte seleciona todas as suas imagens:

$(".thumb img")

... Então, quando você pede o atributo, ele o retorna do primeiro objeto da coleção

Desculpe por todas as edições ... mas é melhor reutilizar objetos jQuery, então:

var $this = $(this)

Em seguida, consulte $ isso foi necessário para otimização. Não é tão importante neste exemplo, mas é uma boa prática de usar.

Answer 2

Você não poderá usar o document.ready () para fazer isso, pois as imagens não terão carregado no momento em que é chamado.

Na verdade, você precisa colocar esse código no manipulador de eventos ONLOAD (), que é chamado após o documento e todas as imagens terminarem o carregamento.

Somente quando as imagens terminam de carregar que o navegador sabe o quão grande elas são.

Answer 3

$().ready(function() {

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

        });

});

Answer 4

Eu usei algo semelhante para pré -carregar uma imagem e definir algum código em MouseOver e MouseOut e definir o estilo para todas as imagens com um nome de classe "Swap". Para mim $(this) não funcionou, mas diretamente this trabalhado:

// 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";
    });
}