Utilizzando jQuery ogni afferrare altezza dell'immagine

Question

Ho un sacco di immagini su una pagina. Sto cercando di utilizzare jQuery per afferrare l'altezza di ogni immagine e visualizzarla dopo l'immagine. Così qui è il mio codice:

---

$(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>


[...]

---

La mia logica dietro la jQuery è che voglio passare attraverso ogni selettore "pollice", assegnare l'altezza della IMG dentro "pollice" per la variabile "ImageWidth", e quindi visualizzare l'altezza in testo dopo ogni "pollice" .

Il problema che sto avendo è che è solo lavorando sulla prima immagine e poi smettere. Posso farlo funzionare se uso la classe "thumb_img", naturalmente, ma ho bisogno di accedere al altezza dell'immagine per la classe "pollice".

Speriamo che questo non è troppo confusa come io sono abbastanza nuovo per jQuery. Grazie anticipatamente.

Answer 1

Utilizzare questa:

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

che segue imposta tutte le vostre immagini:

$(".thumb img")

... così quando si chiede l'attributo ritorna dal primo oggetto della collezione

Ci scusiamo per tutte le modifiche ... ma è meglio di riutilizzare oggetti jQuery, quindi:

var $this = $(this)

Quindi fare riferimento a $ this erano necessari per l'ottimizzazione. Non è un grosso problema in questo esempio, ma è una buona pratica da usare.

Answer 2

Non sarà in grado di utilizzare document.ready () per fare questo, come le immagini non saranno caricati dal momento che si chiama.

In realtà è necessario inserire questo codice nel gestore di eventi onload (), che viene chiamato dopo che il documento e tutte le immagini hanno terminato il caricamento.

E 'solo quando le immagini hanno terminato il caricamento che il browser sa quanto sono grandi.

Answer 3

$().ready(function() {

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

        });

});

Answer 4

Ho usato qualcosa di simile per precaricare l'immagine e impostare un codice in mouseover e mouseout e impostare lo stile per tutte le immagini con un nome di classe "swap". Per me $(this) non ha funzionato, ma direttamente this lavorato:

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