使用jQuery將div封入到wrapper div

Question

就像標題所說的那樣，我需要在div內包裝一些div。這是HTML。

<div class="something1 message"> 
<span class="message-text">This is notification 1</span> 
<input type="text" /> 
</div> 

<div class="something2 message"> 
<span class="message-text">There can be multiple texts like this</span> 
<span class="message-text">There can be multiple texts like this</span> 
<span class="message-text">There can be multiple texts like this</span> 
<input type="text" /> 
</div> 

<div id="content-wrapper" class"message"> 
<span class="message-text">Anotherexample</span> 
<span class="message-text">There can be multiple texts like this</span> 
<input type="text" /> 
</div> 

現在我想什麼，輸出是：

<div class="something1 message"> 
<div class="message-text-wrapper"> 
    <span class="message-text">This is notification 1</span> 
</div> 
    <input type="text" /> 
    </div> 

    <div class="something2 message"> 
<div class="message-text-wrapper"> 
    <span class="message-text">There can be multiple texts like this</span> 
    <span class="message-text">There can be multiple texts like this</span> 
    <span class="message-text">There can be multiple texts like this</span> 
</div> 
    <input type="text" /> 
    </div> 

    <div id="content-wrapper" class"message"> 
<div class="message-text-wrapper"> 
    <span class="message-text">Anotherexample</span> 
    <span class="message-text">There can be multiple texts like this</span> 
</div> 
    <input type="text" /> 
    </div> 

基本上所有的「消息文本」跨度是invidual消息div中會我們包裹在裏面消息文本wrappe DIV。

希望你明白。

Answer 1

這是行得通嗎？這是未經測試的。但是像這樣...

$('.message-text:nth-child(1)').each(function(){ 
$(this).nextAll('.message-text').andSelf().wrapAll("<div class='message-text-wrapper'></div>"); 
}): 

Answer 2

使用jQuery's wrapAll() function：

$('.message-text').wrapAll("<div class='message-text-wrapper' />"); 

這裏的a working fiddle。

編輯：

按照您的指示在評論，下面的代碼將包裝在div每個單獨的元素。小提琴也進行了更新。

$('.message-text').wrap("<div class='message-text-wrapper' />");