Question

我正在使用叠加插件，我想在我的foreach循环中填充每个'overlay'div，其中alt属性来自离它最近的图像。

以下是我目前的代码：

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

<强> Check Fiddle

Answer 3

我已经找到了解决方案，但我觉得好像我误导了那里的jQuery助手。我需要将data-overlayer 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的帮助。

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

3 个答案: