jquery - 使用 jQuery 将 div 包装到包装器 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>

基本上，单个消息 div 内的所有“消息文本”范围都将包装在 message-text-wrappe div 内。

希望你能理解。

Answer 1

使用jQuery's wrapAll() function :

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

这是a working fiddle .

编辑:

根据注释中的说明，下面的代码将包装 div 中的每个单独元素。 fiddle 也已更新。

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