En utilisant jQuery chacun pour saisir hauteur de l'image

Question

J'ai un tas d'images sur une page. Je suis en train d'utiliser jQuery pour saisir la hauteur de chaque image et l'afficher après l'image. Donc, voici mon code:

---

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


[...]

---

Ma logique derrière le jQuery est que je veux passer par chaque sélecteur « pouce », attribuer la hauteur du img intérieur « pouce » à la variable « imageWidth », puis afficher la hauteur dans le texte après chaque « pouce » .

Le problème que je vais avoir est qu'il est seulement travailler sur la première image, puis arrêter de fumer. Je peux le faire fonctionner si j'utilise la classe « thumb_img », bien sûr, mais je besoin d'un accès à la hauteur de l'image pour la classe « pouce ».

Espérons que ce n'est pas trop confus que je suis assez nouveau pour jQuery. Merci d'avance.

Answer 1

Utilisez ceci:

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

Les Selects suivantes toutes vos images:

$(".thumb img")

... donc quand vous demandez l'attribut qu'il retourne dans le premier objet de la collection

Désolé pour toutes les modifications ... mais il est préférable de réutiliser les objets jquery, donc:

var $this = $(this)

Ensuite, reportez-vous à $ cela était nécessaire pour l'optimisation. Pas un gros problème dans cet exemple, mais il est une bonne pratique à utiliser.

Answer 2

Vous ne pourrez pas utiliser document.ready () pour ce faire que les images ne sont chargées par le temps que l'on appelle.

Vous avez réellement besoin de mettre ce code dans le gestionnaire d'événements onload (), qui est appelé après le document et toutes les images ont fini de charger.

Il est seulement quand les images ont fini de charger que le navigateur sait comment ils sont gros.

Answer 3

$().ready(function() {

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

        });

});

Answer 4

Je l'ai utilisé quelque chose de similaire à précharger une image et définir un code dans mouseover et mouseout et définir le style pour toutes les images avec un nom de classe « swap ». Pour moi $(this) ne fonctionnait pas, mais this directement travaillé:

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