如何將每個兩個div添加到div？

我有這樣的名單：如何將每個兩個div添加到div？

<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>

我想每兩個元素（.item）一個div內移動與class="parent"。我試着用下面的，但它不工作：

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

來源

2014-09-28 Mustapha Aoussar

交換第一個和第三個'appendTo'行。我會讓你明白爲什麼... – MaxArt 2014-09-28 19:17:27

你可以包裹每兩個子元素是這樣的：

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

來源

2014-09-28 19:28:53

非常感謝你@ C-link尼泊爾！ – 2014-09-28 19:36:25

很高興爲您效勞。 – 2014-09-28 19:36:48

父是一個緩存元素，以便每次使用它的時候它不會產生新的父親。不確定你是否在尋找類似.wrap（）的東西？ http://api.jquery.com/wrap/或.wrappAll（）http://api.jquery.com/wrapAll/

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

來源

2014-09-28 19:20:36

是的，是的..我想要在div中包裝每個兩個元素。 – 2014-09-28 19:21:53

存放在陣列中的兒童，然後根據需要創建儘可能多的父母，並把它們放回你的列表，這裏是代碼：

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

來源

2014-09-28 19:24:40

您可以使用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>

來源

2014-09-28 19:29:53

非常感謝你@TJ – 2014-09-28 20:49:38

你可以試試這個：沒有包裝就可以得到它。

<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>

來源

2014-09-28 19:43:00

如何將每個兩個div添加到div？

回答

相關問題