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]);
   }

jQuery：将div拆分为另一个div

4 个答案: