在容器中包裝兩個div

Question

我有一個包含多個div的容器，其中需要使用jquery將其中的兩個包裝到另一個div中。請建議可能的方法。

實際結構

<div class='parent'> 
<div class='a'>abcd</div> 
<div class='b'>abcd</div> 
<div class='c'>abcd</div> 
<div class='d'>abcd</div> 
</div> 

預期結構：

<div class='parent'> 
<div class='a'>abcd</div> 
<div class='child'> 
    <div class='b'>abcd</div> 
    <div class='c'>abcd</div> 
</div> 
<div class='d'>abcd</div> 
</div> 

Answer 1

您可以使用wrapAll()功能！它包裝了與選擇器匹配的所有元素！ :)

$('.b,.c').wrapAll('<div class="child"></div>');

JSFIDDLE DEMO

Answer 2

使用wrapAll method：

$('.b, .c').wrapAll('<div class="child" />'); 

inspect this demo

Answer 3

入住這Demo Fiddle

$('.b,.c').wrapAll('<div class="child"></div>') 

使用jQuery .wrapAll() - 它環繞所有匹配的元素的HTML結構。

Answer 4

.wrap(): Wrap an HTML structure around each element in the set of matched elements. 
.wrapAll(): Wrap an HTML structure around all elements in the set of matched elements. 

.wrap（）單獨包裝每個元素，但.wrapAll（）將所有元素作爲一個組包裝。

例如：

<div class="foo"></div> 
<div class="foo"></div> 
<div class="foo"></div> 

以$（ '富 '）包（' '）;，發生這種情況：

<div class="bar"><div class="foo"></div></div> 
<div class="bar"><div class="foo"></div></div> 
<div class="bar"><div class="foo"></div></div> 

但隨着$（' 富'）。 wrapAll（ ''）;，發生這種情況：

<div class="bar"> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
</div> 

Atlast您可以使用WrapAll功能，這樣做:-)