将图像 alt 属性添加到 foreach 循环中的 div 元素答案

【问题标题】：Adding image alt attribute to a div element within a foreach loop将图像 alt 属性添加到 foreach 循环中的 div 元素
【发布时间】：2012-11-14 07:51:21
【问题描述】：

我正在使用一个覆盖插件，我想在我的 foreach 循环中使用最接近它的图像的 alt 属性填充每个“覆盖”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 属性并将其传递给空的覆盖 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>

【问题讨论】：

$('this') 应该是 $(this)。另外请发布呈现的输出而不是 php 代码

标签： jquery foreach append

【解决方案1】：

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

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

Check Fiddle

【讨论】：

我认为.append语法不正确，</p>最后挂了。
感谢 Sushanth 添加评论，但显示为“未定义”
@onjegolders .. 这是更新后的小提琴.. 我已经稍微更改了选择器，因为您似乎在 div 中有多个图像。还为父 div 定义了一个类容器。 ..jsfiddle.net/25sLM/3
谢谢@Sushanth--，这似乎适用于小提琴，但不适用于我的滑块。见上文，我的问题是我需要滑块 div 中的覆盖 div，这样它就留在了 foreach 循环中。感谢您的帮助。

【解决方案2】：

我已经找到了解决方案，但我感觉好像我误导了 jQuery 助手。我需要将 data-overlayer div 放在 data-slides 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——感谢他们的帮助。

【讨论】：

【解决方案3】：

我假设你的 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>');
});

【讨论】：

谢谢，Vega，它在叠加层中添加了描述，除了它总是来自同一个 alt 标签——循环中第一张图片中的那个。
@onjegolders 你在同一个 div 中有 3 个 imgs。那么您希望最终结果如何？
我需要根据循环中的图像来更改覆盖文本。叠加层基本上保存了滑块中每个图像的描述
这是您的方法的一个小技巧，不确定您是否会通过包含的资源获得它？ jsfiddle.net/25sLM/1