在img之前添加并关闭在jquery中使用的定位标记

Question

我有以下代码

<div id="slider">    
    <img src="images/p1.jpg" />
    <img src="images/p2.jpg" />
    <img src="images/p3.jpg" /> 
</div>

我想在jQuery的图像标签之前和之后添加<a> 。 结果将是：

<div id="slider">    
    <a href="http://www.google.com"><img src="images/p1.jpg" /></a>
    <a href="http://www.google.com"><img src="images/p2.jpg" /></a>
    <a href="http://www.google.com"><img src="images/p3.jpg" /></a>    
</div>

---

编辑：评论的详细信息

到目前为止，我已经尝试过像这样：

<span class="phone"><img src="malsup.github.io/images/p1.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p2.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p3.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p4.jpg"></span>

我有加像

$('.phone').each(function() { 
    $(this).wrapInner('<a href="test.php" />'); 
});

---

评论中的其他信息

我想为每个图像使用不同的网址，例如：

<div id="slider">
  <a href="google.com"><img src="images/p1.jpg" /></a>
  <a href="yahoo.com"><img src="images/p2.jpg" /></a>
  <a href="facebook.com"><img src="images/p3.jpg" /></a>
</div> 

Answer 1

您可以使用JQuery wrap()函数来做到这一点，如下所示：

var arr = ['https://www.google.com/', 'https://www.yahoo.com/', 'https://www.bing.com/'];

$("#slider img").each(function(index, value){
    $(this).wrap("<a href='"+arr[index]+"'></a>");
});

这是JSFiddle演示

Answer 2

使用.wrap()

将HTML结构包装在匹配元素集中的每个元素周围。

在这里，您可以将不同的url存储在自定义属性中，这些属性以后可用于包装元素。

 $('#slider img').wrap(function() { return $('<a />', { "href": $(this).data('url'), "class" : "myClass" }); }) 

 .myClass { border: 1px solid red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slider"> <img src="images/p1.jpg" data-url='facebook.com' /> <img src="images/p2.jpg" data-url='google.com' /> <img src="images/p3.jpg" data-url='example.com' /> </div>