jQuery：将div拆分为另一个div

Question

有人知道如何将div拆分为另一个吗？ 在div中有img标签吗？

这是当前状态：

<div id="content">
    <div class="item">
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
    </div>
</div>

我需要什么结果：

<div id="content">
    <div class="item">
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/>
    </div>
</div>

谢谢

Answer 1

只需解开图像，然后将它们分别包装在新容器中即可。

$("#content > .item > img").unwrap().wrap("<div class='item'></div>");

 $("#content > .item > img").unwrap().wrap("<div class='item'></div>"); 

 .item { border: 2px solid blue; margin: 6px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="content"> <div class="item"> <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/> <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/> <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/> </div> <div class="item"> <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/> <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/> <img src="http://placehold.it/50x50/42bdc2/FFFFFF"/> </div> </div> 

Answer 2

首先，您要从图像周围删除当前容器：

$(".item").contents().unwrap();

然后，您要将图像围绕在div中：

$("img").wrap("<div class='item'>");

Answer 3

如果要使用循环：

$('div.item').each(function(){
  var images = $(this).find('img'); //this will create an array of img objects
  $(this).remove();//we do not need this div anymore, we will re-create it below

   for(i=0;i < images.length;i++){
       var divOuter = $('<div class="outer">');
       var divInner = $('<div class="item">');
       divInner.append(images[i] );
       divOuter.append(divInner);
       $("#content").append( divOuter);
   }
 });

Answer 4

你可以做到这一点

images = $("img");
$("#content").html("");
for(i=0;i<=images.length;i++)
   if(images[i]){
       $("#content").append("<div class='item'></div>");
       $("#content .item")[i].append(images[i]);
   }