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中的所有“消息文本”跨度都将包含在message-text-wrappe div中。

希望你明白。

Answer 1

使用jQuery's wrapAll() function：

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

这是a working fiddle。

修改

根据评论中的说明，下面的代码将包装div中的每个元素。小提琴也已更新。

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

Answer 2

这有用吗？这是未经测试的。但是像这样......

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

使用jQuery将div包装到包装器div中

2 个答案: