HTML의 기존 링크를 다른 이미지로 둘러 쌉니?

class = "link"로 기존 링크를 복제하고 div "wrap"의 각 img 주위에 줄 묶는 방법?HTML의 기존 링크를 다른 이미지로 둘러 쌉니?

이

$('#wrap img').wrap('<a href="http://foo.com"></a>');

HTML :

<a href="http://foo.com" class="link"> 
    <img/> 
</a> 
<div id="wrap"> 
    <img class="img" /> 
    <img class="img" />   
    <img class="img" /> 
</div>

결과 :

<a href="http://foo.com" class="link"> 
    <img/> 
</a> 
<div id="wrap"> 
     <a href="http://foo.com" class="link"><img class="img" /></a> 
     <a href="http://foo.com" class="link"><img class="img" /></a>  
     <a href="http://foo.com" class="link"><img class="img" /></a> 
</div>

출처

2014-11-01 coder

outerHTML 본인을 사용할 수 있습니다. 타이 :

var link = $('.link').clone().empty().prop('outerHTML'); 
$('#wrap img').wrap(link);

출처

2014-11-01 10:21:06 undefined

'$ ('. link') .clone(). empty()'이면 충분하다. – dfsq

감사합니다. 둘 다 작동합니다! – coder

@ dfsq 그것도 작동합니다, jQuery는 그 경우 객체를 복제합니다. 원래 스 니펫은 문자열을 사용했기 때문에 'outerHTML'을 사용했습니다. – undefined

이를 수행

 
var anchor = $(".link"); 
anchor.html(''); 
$("#wrap img").wrap(anchor);

우리가이 방법을 사용할 수 있도록 우리가 링크를 모르는 가정

출처

2014-11-01 10:20:18 AlexL

: 원래 IMG을 제거? – coder

예, 새 이미지를 래핑하기 전에 앵커 내부의 원본 이미지를 제거합니다. – AlexL

당신은 단순히이 한 줄 시도 할 수 있습니다 :

$('#wrap img').wrap('<a href="' + $('a.link').prop('href') + '">');

가 자녀가없는 요소를 복제하려면 : 다음에

$('#wrap img').wrap($('a.link').clone().empty());

출처

2014-11-01 10:26:43 AmanVirdi

작동. 단점은 rel = "nofollow"target = "_ blank"를 사용하지 않지만 다른 사람들에게는 유용 할 수 있습니다. – coder

업데이트 된 답변이 유용 할 수 있습니다. – AmanVirdi

이미지 크기는이이 사진을 경우에 호출 생성을 그림이로드되지 않습니다. 오류 이미지가 표시됩니다.

나는 약간 다른 HMTL를 사용하여 테스트

<div id="hekimResimMini"><img src="" id="imgHekimResim" alt="" width="40" height="55" ></div>

 

    $('#imgHekimResim').load(function(){}) 
    .attr("src", "./personelResimi.jpeg?kurSicNo="+lcd.list[x].DOKTORID) 
    .error(function() { 
     var thisImg = this; 
     if ($.browser.msie) { 
      setTimeout(function() { 
       if (! thisImg.complete) { 
       $(thisImg).attr('src', '../../images/error.png'); 
       $(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px'); 
       } 
      },250); 
     } else { 
      $(this).attr('src', '../../images/error.png'); 
      $(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px'); 
     } 
    });

출처

2014-11-01 10:39:33

HTML의 기존 링크를 다른 이미지로 둘러 쌉니?

답변

관련 문제