Question

我正在尝试使图像可点击，为此我想在锚标记中包装图像，以下是我尝试的代码，但是它在图像标记之后生成锚标记

这是HTML代码

// script injected into google cal page after all content has properly loaded
 var month = document.getElementsByClassName("goog-inline-block goog-imageless-button goog-imageless-button-collapse-left goog-imageless-button-collapse-right")[1];
 var delay = 1000;

 setTimeout(function(){
     // code that successfully triggers month's callback.
 },delay);

<div class="goog-inline-block goog-imageless-button goog-imageless-button-collapse-left goog-imageless-button-collapse-right" role="button" style="-webkit-user-select: none;" aria-pressed="false" tabindex="0">
  <div class="goog-inline-block goog-imageless-button-outer-box">
    <div class="goog-inline-block goog-imageless-button-inner-box">
      <div class="goog-imageless-button-pos">
        <div class="goog-imageless-button-top-shadow">&nbsp;</div>
        <div class="goog-imageless-button-content">Month</div></div>
    </div>
  </div>
</div>

Answer 1

只需使用wrap功能，如下所示：

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

Demo

Answer 2

获取容器内的HTML，添加锚标记并再次附加。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

我将使用jQuery .wrap()函数，如下所示。

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

Answer 4

如果您只想让锚点之前，请使用jQuery的.prepend或.prependTo方法。如果你想真正包装它，那么使用jQuery的.wrap方法。

（或者，也许更正确的答案是Sytor's - 这只是直接在你的标记中进行。）

Answer 5

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

Answer 6

尝试以下代码。如果使用jquery wrap函数，这很容易。

Persons

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

在图像标记jQuery之前插入锚标记

6 个答案: