Jquery 在叠加div上显示img的标题元素

形势
我的客户希望在他的frontpage上有一个网格图像，所有这些图像都链接到网站的不同部分。悬停时，应该有一个带有一些文本的覆盖。所有这些都在Wordpress中，因此他可以更改图像、文本，甚至添加或删除图像

解决方案（到目前为止）
我的图像网格解决方案相当简单。一行中有三个单元格且每个单元格中都有图像的表格将添加到彼此下方。
这不是一个响应速度很快的解决方案，但效果很好

对于文本覆盖，我想到了用javascript（jquery）将图像包装在一个容器div中，并将覆盖添加到该容器div中的想法。对于文本，并为我的客户端保持动态和可变，我想我应该提取title属性，客户端在Wordpress中添加图像时可以填充该属性

这就是我到目前为止所做的：

$(function() {
    $("img[class^='imglink']").wrap('<div class="overlay-container"></div>');
    $("img[class^='imglink']").after('<div class="overlay"></div>');

    var imgTitle = $("img[class^='imglink']").attr('title');
    $('.overlay').html(imgTitle);
});

$（函数（）{
$（“img[class^='imglink']）。换行（“”）；
$（“img[class^='imglink']）。在（“”）之后；
var imgTitle=$（“img[class^='imglink']”）attr（'title'）；
$（'.overlay'）.html（imgTitle）；
});

问题
我调用所有以

imglink-

开头的images。作为一个条件，客户机已经为图像分配了一个从这个开始的类，这是他可以在Wordpress中轻松完成的。所有这些图像都被一个容器div包起来。就这么简单。这样，客户端还可以添加悬停时没有覆盖的图像。
但我不知道如何从这些图像中提取标题属性并将其显示在相应的覆盖图中。
在上面提到的提琴中，您将看到在两个覆盖中显示的第一个图像的标题属性

---

有人对如何在相应的覆盖中显示正确的标题属性有什么建议吗？

您基本上是对的。将您的DOM更改包装在

中。每个
函数都将是金色的。像这样：

$(function() {
    
    $("img[class^='imglink']").each(function(){
        var imgTitle = $(this).attr('title');
        $(this).wrap('<div class="overlay-container"></div>');
        $(this).after('<div class="overlay">'+imgTitle+'</div>');
        
    });
});

然后，当您设置覆盖时，您正在为此行的所有
.overlay
元素设置值：

$('.overlay').html(imgTitle);

jQuery有一个.sibles选择器，因此您可以通过一行jQuery代码轻松找到img元素的邻居。请看这里的小提琴：


此代码段将循环遍历所有覆盖，并获取img标记nex的标题：

$('.overlay').each(function(){
    var imgTitle = $(this).siblings('img').attr('title');
    $(this).html(imgTitle);
});

除了JSFIDLE链接外，始终尝试在问题本身中添加相关代码。链接总是会被破坏，未来有同样问题的访问者将无法再看到你的代码。这很好！非常感谢。我想是时候让我对每个函数进行更多的研究了。扩大知识面！
$('.overlay').each(function(){
    var imgTitle = $(this).siblings('img').attr('title');
    $(this).html(imgTitle);
});