将image alt属性添加到foreach循环中的div元素

Question

我正在使用一个覆盖插件，并且我想在foreach循环中用最近的图片中的alt属性来填充每个' overlay‘div。

下面是我目前掌握的代码：

<div data-overlayer="effect:bottom">
                    <div class="portfolio_slide" data-slides="pager:on; fx:slide">
                        <?php foreach ($page->images as $image) { ?>
                            <img src="<?php echo $image->getThumb('wide'); ?>" alt="<?php echo $image->description; ?>">
                        <?php } ?>
                    </div>
                    <div class="overlay"></div>
                </div>

我的Jquery：

$(".overlay").each(function () {
    $(this).append('<p>'function() {
      return $('this').parent('img').attr('alt');
    })'</p>');
});

我试图从循环中的每个图像中获取alt属性，并将其传递给空的overlay div。如果您能给我指点，我将不胜感激。提前感谢！

编辑:这是我的HTML输出

div data-overlayer="effect:bottom">
                    <div class="portfolio_slide" data-slides="pager:on; fx:slide">
                                                        <img src="/pw_template/site/assets/files/1060/wide_img_0468.jpg" alt="View over Sète">
                                                        <img src="/pw_template/site/assets/files/1060/wide_montpellier.jpg" alt="Beautiful Montpellier at night">
                                                        <img src="/pw_template/site/assets/files/1060/wide_img_0762-1-1.jpeg" alt="Nina relaxing on the lawn">
                                                </div>
                    <div class="overlay"></div>
                </div>

Answer 1

我假设您的html结构如下所示，

     <div data-overlayer="effect:bottom">
         <div class="portfolio_slide" data-slides="pager:on; fx:slide">
                        <img src="someImage.png" alt="Some Alt Text">
         </div>
         <div class="overlay"></div>
     </div>

那么您的$.each应该如下所示：

$(".overlay").each(function () {
    var $this = $(this);
    $this.append('<p>' +  $this.parent().find('img').attr('alt') + '</p>');
});

Answer 2

缺少逗号和$('this')而不是$(this)

$(".overlay").each(function () {
    var $this = $(this);
    $(this).append(function() {
      return '<p>' + $this.closest('div').find('img').attr('alt') + '</p>'
    });
});

Answer 3

我已经找到了解决方案，不过我觉得好像我误导了jQuery助手。我需要将数据覆盖层div放在数据幻灯片div中，这样我的图像描述就会留在循环中。

代码现在如下：

<div class="portfolio_slide" data-slides="pager:on; fx:slide">
                        <?php foreach ($page->images as $image) { ?>
                        <div data-overlayer="effect:bottom">
                            <img src="<?php echo $image->getThumb('wide'); ?>" alt="<?php echo $image->description; ?>">
                            <div class="overlay"><?php echo $image->description; ?></div>
                            </div>
                        <?php } ?>
                    </div>

不需要额外的jQuery，虽然我想我会尝试学习更多，但我甚至不知道是否可以在数组中访问和设置每个项目的数据。我想一定是这样的。

无论如何，感谢@Vega和@Sushanth--他们的帮助。