Question

我正在尝试创建一段HTML代码，并遍历该代码段中的每个图片并应用侦听器功能并修改图像。但是，使用JQuery的.each()函数不允许我使用.prop()等函数来获取/设置图像属性。如何将.prop()等函数应用于.each()函数迭代的元素。

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

console.log(_this.prop('data-src'))内的each，每张图片都会返回undefined。

Answer 1

你的问题与每个（）无关。您的问题是您正在尝试使用prop（）来处理HTML5数据属性。

“data-src”不是HTML属性，因此_this.prop（'data-src'）返回null。如果您使用prop（）尝试写入data-src属性，则会遇到同样的问题。

相反，要使用jquery读取名为data-src的数据属性，请使用data（）。所以使用_this.data（'src'）。

有关更多帮助，请参阅https://api.jquery.com/data/#data-html5。

Answer 2

我在下方创建了一个简单的脚本，可以帮助您使其正常工作：

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>

JQuery：无法从图像列表中的每个img获取属性

2 个答案: