jQuery로 하나의 HTML 블록을 다른 블록에 매핑하기

Question

나는 각 이미지에 <li>을 포함하는 <ul> 블록으로 대체해야하는 여러 이미지가있는 div가 있습니다. 그래서 1을 차단, 아래의 블록으로 교체받을 필요 2.

Block1 

     <div id="box"> 
      <img src="images/pic1.jpg"> 
      <img src="images/pic2.jpg"> 
      <img src="images/pic3.jpg"> 
        etc. 
     </div> 



Block2 

     <ul> 
      <li> 
       <img src="images/pic1.jpg"> 
      </li> 
      <li> 
       <img src="images/pic2.jpg"> 
      </li> 
      <li> 
       <img src="images/pic3.jpg"> 
      </li> 
          etc. 
     </ul> 

나는 시작했습니다

$('<ul id='wrapper'>); 
$('#box').find('img').each(function() { 
       src = $(this).find('img')[0]; 
       $('<li><img src=src></li>).appendTo('ul#wrapper') ; 
       }); 

하지만이 일을 서투른과 같지는 않다, 나는 것으로 생각하고있다 이것을 제거하는보다 우아한 방법이어야합니다.

누구에게 의견이 있습니까?

감사

Answer 1

쉬운 방법은 것에 : 당신은, 당신도 당신의 랩에 클래스 등을 추가 할 수 있습니다 싶었다면

$('#box').find('img').each(function() { 
    $(this).wrap("<li></li>"); 
}); 
$('#box').wrapInner("<ul id='wrapper'></ul>"); 

FIDDLE

. 자세한 내용은 here입니다.