在圖片標簽jQuery之前插入錨標簽

Question

我正在嘗試使圖像可點擊，為此，我想將圖像包裝在錨標記中，以下是我嘗試過的代碼，但是它在圖像標記之后生成了錨標記

這是HTML代碼

 jQuery(document).ready(function($){ jQuery('.fancybox-inner').append('<a href="#" class="new-img-holder"></a>'); jQuery('.fancybox-image').appendTo('new-img-holder'); }); 

 <div class="fancybox-outer"> <div class="fancybox-inner" style="overflow: visible; width: 640px; height: 463px;"> <img class="fancybox-image" src="cine-sudarshan.jpg" alt=""> </div> </div> 

Answer 1

只需使用wrap函數即可，如下所示：

$("img.fancybox-image").wrap('<a href="#" />');

演示版

Answer 2

在容器內獲取HTML，添加定位標記並再次添加。

 jQuery(document).ready(function($) { var html = jQuery('.fancybox-inner').html() var newHtml = '<a href="#" class="new-img-holder">' + html + '</a>' jQuery('.fancybox-outer').empty().html(newHtml); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fancybox-outer"> <div class="fancybox-inner" style="overflow: visible; width: 640px; height: 463px;"> <img class="fancybox-image" src="cine-sudarshan.jpg" alt=""> </div> </div> 

Answer 3

我將為此使用jQuery .wrap()函數。

$( ".fancybox-image" ).wrap( "<a href='LINK_TO_NAVIGATE'></a>" );

Answer 4

如果您只是想讓錨.prepend 在前面 ，請使用jQuery的.prepend或.prependTo方法。 如果要真正包裝它，請使用jQuery的.wrap方法。

（或者，也許更正確的答案是Sytor的答案-就是直接在您的標記中這樣做。）

Answer 5

 $(".fancybox-image").wrap('<a href="#" class="new-img-holder"></a>');

Answer 6

嘗試下面的代碼。 如果使用jquery wrap函數，這很容易。

  jQuery(document).ready(function ($) { $(".fancybox-image").wrap('<a href="javascript:void(0)" onclick="alert(\\'clicked anchor tag\\')" class="new-img-holder"></a>'); //jQuery('.fancybox-inner').wrap('<a href="#" class="new-img-holder"></a>'); //jQuery('.fancybox-image').wrap('new-img-holder'); }); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fancybox-outer"> <div class="fancybox-inner" style="overflow: visible; width: 640px; height: 463px;"> <img class="fancybox-image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt=""> </div> </div>