동적으로 추가 <a> 모든 이미지에 태그 <img> 특정 div

Question

특정 div의 모든 이미지에 태그를 rel-Attribute로 동적으로 추가하고 싶습니다.

는 예컨대 자바 스크립트 함수 후 HTML

<div id="content"> 
    <img src="images/1.jpg" alt="Pic One" /> 
    <img src="images/2.jpg" alt="Pic Two" /> 
    (...) 
</div> 

내 코드, 그것은 다음과 같이해야한다 :이 작업을 수행하는 적절한 방법은

<div id="content"> 
    <a href="images/1.jpg" rel="prettyPhoto"><img src="images/1.jpg" alt="Pic One"/></a> 
    <a href="images/2.jpg" rel="prettyPhoto"><img src="images/2.jpg" alt="Pic One"/></a> 
    (...) 
</div> 

있습니까? 아마 정규식으로?

Answer 1

이 시도 : 혼자

$('#content img').each(function(){ 
    $(this).wrap('<a href="'+$(this).attr('src')+'" rel="prettyPhoto"></a>'); 
}); 

Working Demo

Answer 2

자바 스크립트는이 작업을 수행 할 수 있습니다. 첫째, 사업부 내부의 모든 이미지를 선택 :

var images=document.getElementById("content").querySelectorAll("img"); 

그런 다음 각 통해 루프 할 것입니다 및 편집 : 그것을해야

for (var I=0; I<images.length; I++){ 
    images[I].outerHTML="<a href='"+images[I].src+"' rel='prettyPhoto'>"+images[I].outerHTML+"</a>"; 
} 

합니다.

Answer 3

$("#content > img").each(function(){ 
    $(this).wrap("<a>"); 
});