查找图像中的所有图像的src url

简短摘要：我在Jekyll的情况下需要为每个单独的图像找到src url并将其发回到href =“imgurl”中。 jQuery或Javascript。查找图像中的所有图像的src url

我试过到目前为止：

$(document).ready(function(){ 

    var postTitle = document.title.replace(/ /g,''); 

    $("article img").each(function() { 
    imgsrc = this.src; 
    console.log(imgsrc); 
    }); 

    $("article img").wrap('<a href="' + imgsrc + '" data-lightbox="' + postTitle + '"></a>');

的原因，我包裹在一个标签的文章IMG，是因为prose.io，这是我使用的降价，自动分配中的图像p标签。

我最终想做的是将所有图像分组在相同的职位（数据灯箱），并创建一个灯箱库自动从添加的图像到页面。

用我现有的代码，我已经设法从第一个添加的图像中获取url，但不幸的是，帖子中的所有图像都被分配了与第一个相同的url。它们在现场显示为正确的图像，但url与第一张图像（阵列中的位置[0]）相同。当我点击图片时，灯箱会打开并显示正确数量的图片，但它们都显示第一张图片。 console.log正确输出帖子中所有图片的网址。

EDIT-BONUS：已验证！作为一个奖励问题：如果我要用alt文本做同样的事情，将它复制到数据标题属性中，我将如何继续？目前有这样的：

var altText = $("img", this).attr("alt"); 

    $("article img").each(function() { 
    $(this).wrap('<a href="' + this.src + '" data-lightbox="' + postTitle + '" data-title="' + altText + '"></a>');

}）;

再次，它只是让我第一个图像alt，并指派给所有的图像。

我希望你们中的一些人知道如何解决这个混乱。

提前，谢谢你的时间！

来源

2016-01-23 Lodott1

每当有图像时，您都会优先于imgsrc。

尝试这样：

$("article img").each(function() { 
    var src = this.src; 
    var alt = $(this).attr("alt"); 
    $(this).wrap('<a href="' + src + '" data-lightbox="' + postTitle + '" data-title="' + alt + '"></a>'); 
});

检查.attr()更多信息！

来源

2016-01-23 18:53:30

非常感谢您的回答。这工作就像一个魅力！另外，谢谢你指出我做错了什么;这使得它更容易学习。 – Lodott1

很高兴帮助！不要忘记验证答案！ –

已验证！另外，请检查奖金问题:) – Lodott1

查找图像中的所有图像的src url

回答

相关问题