从 alt 脚本创建图像标题答案

【问题标题】：Creating image caption from alt script从 alt 脚本创建图像标题
【发布时间】：2009-12-08 03:35:18
【问题描述】：

我正在尝试使用这个 jQuery 脚本从 alt 标签制作图片标题：

$("#content img").each(function () {
    var $this = $(this);
    var title = $this.attr("alt");
$this.after('<div class="caption">'+ title +'</div>');
});

我在它之前使用了另一个 jQuery 脚本，它工作正常。我似乎无法让 alt 脚本的标题正常工作。

示例：www.cslack.com/test.html

谢谢，

罗伯特

【问题讨论】：

通过查看您的示例页面，您应该将位置绝对样式添加到 <a> 标记，或者更好的是围绕每个链接包装图像的包装器。这样，当您添加标题时，它也将与图像定位在同一位置。

标签： jquery image tags caption

【解决方案1】：

您的问题是您在图像存在之前执行代码。

您需要将代码包装在$(function() { code }) 中以使其在文档加载后运行。

或者，您可以将<script> 块移动到<body> 标记的末尾img 标记之后。

另外，您的 HTML 没有 #content 元素；您需要将选择器更改为img 或将所有<img> 标签放在<div id='content'> 中。

【讨论】：

【解决方案2】：

 $(function(){

   $('a > img[style]').each(function(){
       $el = $(this);
       var style = $el.attr('style');
       $el.attr('style','');
       $el.parent().attr('style',style);
    }); //Moves the inline styles

      $("img").each(function(){
          var title = this.alt;
          $(this).after('<div class="caption">'+ title +'</div>');
      }); //Adds the dynamic captions.
 });

【讨论】：

不，不要使用append 代替after。调用append 会将div inside 放在<img> 标记中，这不是他想要的。
谢谢你们的帮助。我仍然不能让它工作。我对此很陌生。你介意再看看吗？
看起来找到了。做宣传的事！好的——你的javascript很好（尽管在页面中只包含一次jQuery是个好主意）。但是，您的问题在于每个图像的 css 样式。我会将 style="position..." 移动到元素而不是它现在所在的

【解决方案3】：

在您的示例页面上，没有 #content 这样的东西，这就是它不起作用的原因。

如果您在内容周围放置<div id="content">，那么它应该可以工作。

【讨论】：

+1 用于快速查找，或者（在这种情况下可能是一个更好的解决方案）您可以删除 #content 并留下 $("img") 这将选择每个 img页面。