CODEWITHSUNDEEP
javascriptjqueryhtml
terpak
terpak

Reputation: 1151

JQuery: Unable to get property from each img in a list of images

I'm trying to create a snippet of HTML, and iterate through each image within that snippet and apply a listener function and modify the image. However, using JQuery's .each() function is not allowing me to use functions such as .prop() to get/set image attributes. How can I apply functions such as .prop() to elements iterated over by the .each() function.

//formatImg simply returns a URL to the resource
var images = '<div class="flex-row">\
                <div class="img">\
                    <img class="img-cover" data-src="' + formatImg(gallery.posts[0].image, 'medium') + '">\
                </div>\
                <div class="img">\
                    <img class="img-cover" data-src="' + formatImg(gallery.posts[1].image, 'medium') + '">\
                </div>\
            </div>';

var location = gallery.posts[0].location.address || 'No Location';

var elem = $('<div class="col-xs-6 col-md-3 tile story">\
        <div class="tile-body">\
            <div class="frame"></div>\
            <div class="hover">\
                <p class="md-type-body1">' + (gallery.caption || '') + '</p>\
                <ul class="md-type-body2">\
                    <li>' +  gallery.posts.length +  (gallery.posts.length == 1 ? ' photo' : ' photos') +'</li>\
                </ul>\
            </div>\
            ' + images + '\
        </div>\
        <div class="tile-foot">\
            <div class="hover">\
                <a href="/gallery/'+ gallery._id +'" class="md-type-body2">See all</a>\
                <!--<span class="mdi mdi-library-plus icon pull-right"></span>-->\
                <!--<span class="mdi mdi-download icon toggle-edit toggler pull-right"></span>-->\
            </div>\
            <div>\
                <div class="ellipses">\
                    <span class="md-type-body2">' + location + '</span>\
                    <span class="md-type-caption">' + getTimeAgo(new Date().getTime(), gallery.time_created) +'</span>\
                </div>\
            </div>\
        </div>\
    </div>'
);

elem.find('img.img-cover').each(function(){
    _this = $(this);
    console.log(_this.prop('data-src'));
    attachOnImageLoadError(_this);
    _this.prop('src',_this.prop('data-src'));
});

The console.log(_this.prop('data-src')) from within each, it returns undefined for every image.

Upvotes: 1

Views: 98

Answers (2)

BrianFreud
BrianFreud

Reputation: 7454

Your problem has nothing to do with each(). Your problem is that you're trying to use prop() to handle HTML5 data attributes.

"data-src" is not an HTML property, therefore _this.prop('data-src') returns null. You would run into the same problem if you were using prop() to try to write to a data-src attribute.

Instead, to read a data attribute named data-src using jquery, use data(). So use _this.data('src').

See https://api.jquery.com/data/#data-html5 for more help.

Upvotes: 2

MaxZoom
MaxZoom

Reputation: 7753

I have created a simple script below that may help you to make it work:

var images = '<div class="flex-row">\
                <div class="img">\
                   <img class="img-cover" data-src="img-1" />\
                </div>\
                <div class="img">\
                    <img class="img-cover" data-src="img-2">\
                </div>\
            </div>';

$(images).find('img.img-cover').each(function() {
  alert($(this).data('src'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Related Questions