Вставить анкер тега перед тем изображением тега JQuery

Я пытаюсь сделать изображение интерактивным и для этого я хочу, чтобы обернуть изображение в пределах тега привязки, следуя код, который я попробовал, но его производящую якорь тег после изображения тегаВставить анкер тега перед тем изображением тега JQuery

Это 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>

источник

2016-10-19 Sanjeev Kumar

«Я хочу, чтобы обернуть изображение в пределах тега привязки» - вы не завернуть изображение в теге привязки (o.o). Почему бы не использовать 'document.getElementById ('fancybox-outer')', а затем завершить ссылку там? Когда вы добавляете в jquery для действия, вам необходимо связать с этим событием –

Получить 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>

источник

2016-10-19 05:08:05

Если вы просто хотите, чтобы якорь идти перед тем использовать JQuery-х .prepend или .prependTo методов. Если вы хотите по-настоящему обернуть его, используйте метод jQuery .wrap.

(Или, возможно, более правильный ответ Sytor в -., Который должен просто сделать это прямо в разметке)

источник

2016-10-19 05:03:29

-1

почему бы не использовать якорь тег непосредственно?

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

источник

2016-10-19 05:03:35 Sytor

, что HTML не редактируется, поэтому я попытался с jQuery –

попробуйте http://stackoverflow.com/a/1767536/6952155 – Sytor

Я хотел бы использовать JQuery .wrap() функцию для этого как следует.

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

источник

2016-10-19 05:09:04 Hemal

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

источник

2016-10-19 05:09:13 Raki

Вы должны использовать одинарные кавычки внутри упаковка функция. – Hemal

Просто используйте wrap функцию для этого, как показано ниже:

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

Demo

источник

2016-10-19 05:13:28

Попробуйте ниже код. Это легко, если вы используете функцию обертки 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>

источник

2016-10-19 05:20:07

Когда вы нажмете «Изображение», вы получите предупреждение, которое докажет, что изображение находится в теге привязки –

Вставить анкер тега перед тем изображением тега JQuery

ответ

Смежные вопросы