挿入アンカータグ画像タグのjQuery

Question

前に、私はクリック可能な画像を作成しようとしています。このために、私はアンカータグ内の画像をラップしたい、以下の私が試したコードが、画像タグ

後の生成アンカータグは、これがされていますHTMLコード

jQuery(document).ready(function($){ 
 
\t jQuery('.fancybox-inner').append('<a href="#" class="new-img-holder"></a>'); 
 
\t 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

コンテナ内のHTMLを取得し、アンカータグを追加してもう一度追加します。私は次のように、このためのjQuery .wrap()機能を使用することになり

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 2

あなただけのアンカーが前に行きたい場合は、使用してjQueryの.prependまたは.prependTo方法。本当にそれをラップしたい場合は、jQueryの.wrapメソッドを使用してください。

（または、おそらくより正確な答えはSytorのである - 。あなたのマークアップに直接それをただ行うことである）

Answer 3

なぜ直接アンカータグを使わないのでしょうか？

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

Answer 4

。

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

Answer 5

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

Answer 6

ただ、下記のように、このためにwrap機能を使用します。

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

Demo

Answer 7

をコードの下に試してみてください。 jqueryラップ関数を使用すると簡単です。

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>