javascript - 使用 JQuery 替换一页上的多个 HTML 实例

Question

我制作了一个脚本来复制 alt图像的属性并将其放入 <span> .它还制定了由连字符分隔的信息。它就像一个魅力，但只有一张图片。

我还想包装一个 <div>围绕图像以防止不必要的标记。

脚本片段:

HTML:

<div id="hoejre">
    <p>
         <span class="alignright">
             <img src="tommy_stor.jpg" alt="Name - Title" 
                  width="162" height="219" />
             <span></span>
         </span>
   </p>
</div>

jQuery:

var alt = $("#hoejre p span img").attr("alt");
$('#hoejre p span span')
 .html("<strong>" + alt.replace("-", "</strong> <em>") + "</em>");

输出:

<span class="alignright">
    <img height="219" width="162" alt="Name - Title"                  
         src="tommy_stor.jpg">
        <span>
            <strong>Name</strong><em>Title</em>
        </span>
</span>

如何在包含不同信息的多张图片上重复效果？

Answer 1

我会选择...

$(document).ready(function () {
  $('img.some-class').each(function () {
    var self = $(this);

    self.wrap('<div />').after('<span><strong>' + self.attr('alt').replace('-', '</strong> <em>') + '</em></span');
  });
});

确保您为那些您希望它工作的图像分配一个公共(public)类，并适本地更改“some-class”。

我不太确定您要删除什么“不必要的标记”，但上面的代码是一个很好的起点。