Question

我希望使用rel-Attribute在特定div中的所有图片中动态添加标记。

例如我的HTML代码

<div id="content">
  <img src="images/1.jpg"  alt="Pic One" />
  <img src="images/2.jpg"  alt="Pic Two" />
  (...)
</div>

在JavaScript函数之后，它应该是这样的：

<div id="content">
  <a href="images/1.jpg" rel="prettyPhoto"><img src="images/1.jpg" alt="Pic One"/></a>
  <a href="images/2.jpg" rel="prettyPhoto"><img src="images/2.jpg" alt="Pic One"/></a>
  (...)
</div>

有没有合适的方法呢？也许正则表达式？

Answer 1

试试这个：

 $('#content img').each(function(){
  $(this).wrap('<a href="'+$(this).attr('src')+'" rel="prettyPhoto"></a>');
 });

<强> Working Demo

Answer 2

只有JavaScript可以做到这一点。首先，选择div中的所有图像：

var images=document.getElementById("content").querySelectorAll("img");

然后，您想要遍历每个并编辑它：

for (var I=0; I<images.length; I++){
    images[I].outerHTML="<a href='"+images[I].src+"' rel='prettyPhoto'>"+images[I].outerHTML+"</a>";
}

应该这样做。

Answer 3

$("#content > img").each(function(){
    $(this).wrap("<a>");
});

动态添加<a> Tag in all Images<img/> in a specific div</a>

3 个答案: