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

确保为要使用此图像的图像指定一个公共类，并适当地更改“some-class”。

我不太确定你想删除的'不必要的标记'，但上面的代码是一个很好的起点。

Answer 2

这是另一种假设所有<img>元素都包含在单个元素中的方法。

$('#box img').each(
  function(index,element){
    // do your magic here for
  }
)

如果您使用此方法或Matt的方法，jQuery.each()内的函数将是相同的。扩展Matt使用您提供的HTML的方法：

$('span.alignright').each(
  function(index,element){
    var img=$(this).find('img');
    // do your magic here
  }
);

您采取哪种方法取决于您的情况。

使用JQuery在一个页面上替换多个HTML实例

脚本片段：

2 个答案: