Question

我有以下代码

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

我想在jQuery的image标签之前和之后添加<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>");
});

Here is the JSFiddle demo

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>

在img之前使用jquery添加和关闭锚标记

2 个答案: