从 <figcaption> 标签覆盖/插入新的 alt 标签答案

【问题标题】：Override/Inset new alt tag from <figcaption> tag从 <figcaption> 标签覆盖/插入新的 alt 标签
【发布时间】：2015-07-13 11:35:29
【问题描述】：

我有一个 jQuery，见下文，它将我的图像包装在一个 href 标记中，以便它们可以在灯箱中使用。

我还需要调整出现在 alt 标记中的内容，并且它需要从用户在 ckeditor 的标题框中输入的任何内容生成（在每个图像下生成一个 figcaption 标记）。我需要能够将该数据插入到空的 alt="" 中，并且如果 alt 标签中当前有任何内容，则能够覆盖。

此时正在输出的html是：

<figure class="image">
    <a data-imagelightbox="f" href="/ckfinder/userfiles/files/Screenshot_South-Downs-Lines-RSC_51_23330-1_22091_10-00-48.jpg">
        <img width="1600" height="900" src="/ckfinder/userfiles/files/Screenshot_South-Downs-Lines-RSC_51_23330-1_22091_10-00-48.jpg" alt="Caption 1"></img>
    </a>
    <figcaption>
        Caption
    </figcaption>
</figure>

我目前的脚本如下：

$('#article-copy img').each( function() {
    var $img = $(this),
        alt = $img.next('figcaption').text(),
        href = $img.attr('src');
    $img.wrap('<a href="' + href + '" data-imagelightbox="f"></a>');
});

感谢您的帮助

【问题讨论】：

这是函数运行之前还是之后的HTML？
html 是 jquery 运行后生成的，它当前仅将图像包装在 href 中，但当前不更改 alt 标签，这是我想要实现的。谢谢

标签： jquery html

【解决方案1】：

如果我理解正确，您想更改图像的alt 属性。那么这应该工作：

$('#article-copy img').each( function() {
    var $img = $(this),
        alt = $img.next('figcaption').text(),
        href = $img.attr('src');
    $img.attr('alt', alt );
    $img.wrap('<a href="' + href + '" data-imagelightbox="f"></a>');
});

【讨论】：