Использование jQuery для каждого из них для захвата высоты изображения

Question

У меня есть куча изображений на странице.Я пытаюсь использовать jQuery, чтобы захватить высоту каждого изображения и отобразить его после изображения.Итак, вот мой код:

---

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


[...]

---

Моя логика, лежащая в основе jQuery, заключается в том, что я хочу просмотреть каждый селектор "thumb", присвоить высоту img внутри "thumb" переменной "imageWidth", а затем отобразить высоту в тексте после каждого "thumb".

Проблема, с которой я столкнулся, заключается в том, что он работает только с первым изображением, а затем завершает работу.Конечно, я могу заставить это работать, если использую класс "thumb_img", но мне нужен доступ к высоте изображения для класса "thumb".

Надеюсь, это не слишком сбивает с толку, поскольку я довольно новичок в jQuery.Заранее благодарю.

Answer 1

Используй это:

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

Ниже выбираются все ваши изображения:

$(".thumb img")

...поэтому, когда вы запрашиваете атрибут, он возвращает его из первого объекта в коллекции

Извините за все правки...но лучше всего повторно использовать объекты jquery, так что:

var $this = $(this)

Затем обратитесь к $this, которые были необходимы для оптимизации.В этом примере это не так уж важно, но это хорошая практика для использования.

Answer 2

Вы не сможете использовать document.ready() для этого, так как изображения не будут загружены к моменту вызова.

На самом деле вам нужно поместить этот код в обработчик событий onload(), который вызывается после завершения загрузки документа и всех изображений.

Только после завершения загрузки изображений браузер узнает, насколько они велики.

Answer 3

$().ready(function() {

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

        });

});

Answer 4

Я использовал нечто подобное для предварительной загрузки изображения и установки некоторого кода в mouseover и mouseout и установки стиля для всех изображений с именем класса "swap".Для меня $(this) не сработало, но непосредственно this сработало:

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