使用jQuery将一个HTML块映射到另一个块

Question

我有一个需要被<ul>块代替的多个图像的div，每个图像包含一个<li>。所以块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。