Question

我有这个清单：

<div id="list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

我想在class="parent"的div中移动每两个元素（.item）。我尝试了以下内容，但它不起作用：

var parent = $("<div class='parent'></div>");
$("#list .item:nth-child(1), #list .item:nth-child(2)").appendTo(parent);
$("#list .item:nth-child(3), #list .item:nth-child(4)").appendTo(parent);
$("#list .item:nth-child(5), #list .item:nth-child(6)").appendTo(parent);

jsFiddle

Answer 1

parent是一个缓存元素，因此每次使用它时都不会创建新的父元素。不确定你是否在寻找类似.wrap（）的东西？ http://api.jquery.com/wrap/或.wrappAll（）http://api.jquery.com/wrapAll/

$('#list').children().wrapAll('<div class="parent"/>');

Answer 2

将孩子存放在一个数组中，然后根据需要创建尽可能多的父母并将其放回列表中，这是代码：

var list = $("#list"),
    items = $.makeArray($(".item"));

list.html("");
for (var i=0; i < items.length; i++) {
    if (i%2 == 0) list.appendChild($('<div class="parent"/>'));
    $("#list div:last-child").appendChild(items[i]);
}

Answer 3

你可以像这样包装每两个子元素：

var childLists= $('.item');
for(var i = 0, l = childLists.length; i < l; i += 2) {
    childLists.slice(i, i+2).wrapAll('<div class="parent"></div>');
}

Answer 4

您可以使用wrapAll()方法，如下所示：

$(".item:even").each(function(){
  $(this).next().addBack().wrapAll("<div class='parent'></div>");
})

*{
  margin:0;
  padding:0;
}
body{
  background:silver;
}
.parent{
  height:100px;
  padding:5px;
  margin:5px;
  text-align:center;
  background:dodgerblue;
  }
.item{
  height:40px;
  line-height:40px;
  margin:5px 0;
  background:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

Answer 5

你可以试试这个：没有包装就可以得到它。

<script>
$(document).ready(function(){
var parent = document.createElement("div"); 
parent.className = "parent";
x = document.getElementById("list");
parent.appendChild(x);
document.body.appendChild(parent);
});
</script>

<div id="list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

如何将每两个div附加到div？

5 个答案: