jQuery的 - 換行的div元素多

Question

嗨
假設我有下面的代碼：

<div class="Hello"> 
    <div class="inner">Hello</div> 
    </div> 
    <div class="Goodbye"> 
    <div class="inner">Goodbye</div> 
    </div> 
    <div class="Goodnight"> 
    <div class="inner">Goodnight</div> 
    </div> 

我如何包裝一個div這3個單嗎？ 結果應該是：

<div> 
     <div class="Hello"> 
     <div class="inner">Hello</div> 
     </div> 
     <div class="Goodbye"> 
     <div class="inner">Goodbye</div> 
     </div> 
     <div class="Goodnight"> 
     <div class="inner">Goodnight</div> 
     </div> 
    </div> 

更新（不行）

<script src="http://code.jquery.com/jquery-1.4.4.js"></script> 

<div class="Hello"> 
    <div class="inner">Hello</div> 
</div> 
<div class="Goodbye"> 
    <div class="inner">Goodbye</div> 
</div> 
<div class="Goodnight"> 
    <div class="inner">Goodnight</div> 
</div> 

<script> 
$("<div>").insertBefore(".Hello").append(".Hello, .Goodbye, .Goodnight"); 
</script> 

更新2（工作）

<script src="http://code.jquery.com/jquery-1.4.4.js"></script> 

<div class="Hello"> 
    <div class="inner">Hello</div> 
</div> 
<div class="Goodbye"> 
    <div class="inner">Goodbye</div> 
</div> 
<div class="Goodnight"> 
    <div class="inner">Goodnight</div> 
</div> 

<script> 
$("<div>").insertBefore(".Hello").append($('.Hello'), $('.Goodbye'), $('.Goodnight')); 
</script> 

更新3（不行）

<script src="http://code.jquery.com/jquery-1.4.4.js"></script> 

<div class="Hello"> 
    <div class="inner">Hello</div> 
</div> 
<div class="Goodbye"> 
    <div class="inner">Goodbye</div> 
</div> 
<div class="Goodnight"> 
    <div class="inner">Goodnight</div> 
</div> 

<script> 
//$("<div>").insertBefore(".Hello").append($('.Hello'), $('.Goodbye'), $('.Goodnight'));  
$(".Hello, .Goodbye, .Goodnight").wrap('div'); 
</script> 

結果：

<div class="Hello"> 
    <div class="inner">Hello</div> 
<div class="Hello"> 
    <div class="inner">Hello</div> 
</div></div> 
<div class="Hello"> 
    <div class="inner">Hello</div> 
<div class="Hello"> 
    <div class="inner">Hello</div> 
</div><div class="Goodbye"> 
    <div class="inner">Goodbye</div> 
</div></div> 
<div class="Hello"> 
    <div class="inner">Hello</div> 
<div class="Hello"> 
    <div class="inner">Hello</div> 
</div><div class="Goodnight"> 
    <div class="inner">Goodnight</div> 
</div></div> 

謝謝

Answer 1

不要使用.wrap()方法。只需創建一個新的div和.append()每個元素。 E.g：

$("<div>") 
    .insertBefore(".Hello") 
    .append($(".Hello, .Goodbye, .Goodnight")); 

的div將內移動，而不是克隆。