Jquery 将p和ul元件包装在同一容器中

我需要通过JQuery用div容器（class=editable）包装所有p和ul元素。同一“内容”容器中的所有元素应包装在同一个可编辑容器中

所以这个HTML代码

<div id="article">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <section class="box_1">
        <header class="trigger"><h2>Title</h2></header>
        <div class="content">
            <ul>
                <li>Lorem</li>
                <li>ipsum</li>
            </ul>
            <p>Lorem ipsum</p>
        </div>
    </section>
    <section class="box_1">
        <header class="trigger"><h2>Title</h2></header>
        <div class="content">
            <p>Lorem ipsum</p>
            <p>Lorem ipsum</p>
        </div>
    </section>
</div>

同侧眼睑

同侧眼睑

标题

洛勒姆
ipsum

同侧眼睑

标题
同侧眼睑

同侧眼睑

…应该变成这样

<div id="article">
    <div class="editable">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
    </div>
    <section class="box_1">
        <header class="trigger"><h2>Title</h2></header>
        <div class="content">
            <div class="editable"> <!-- this part doesn't work right now -->
                <ul>
                    <li>Lorem</li>
                    <li>ipsum</li>
                </ul>
                <p>Lorem ipsum</p>
            </div> <!-- this part doesn't work right now -->
        </div>
    </section>
    <section class="box_1">
        <header class="trigger"><h2>Title</h2></header>
        <div class="content">
            <div class="editable">
                <p>Lorem ipsum</p>
                <p>Lorem ipsum</p>
            </div>
        </div>
    </section>
</div>

同侧眼睑

同侧眼睑

标题

洛勒姆
ipsum

同侧眼睑

标题
同侧眼睑

同侧眼睑

我正在使用以下代码：

$('.content > p, #article > p').each(function () {
    if (!$(this).closest('.editable').length) $(this).nextUntil('div, section').addBack().wrapAll("<div class='editable' />");
});

$（'.content>p，#article>p'）。每个（函数（）{
if（！$（this）.closest（'.editable'）.length）$（this）.nextUntil（'div，section'）.addBack（）.wrapAll（“”）；
});

---

…这对每个p元素都很有效。但是我必须如何修改它，以便ul元素（带有内部li元素）像p元素一样处理？它们也应该被包装。

您可以简单地遍历元素并包装它们的

p

和

ul

子元素：

$('#article, .content').each(function() {
    $(this).children('p, ul').wrapAll("<div class='editable' />");
});

$（'article，.content'）。每个（函数（）{
$（this.children（'p，ul'）.wrapAll（“”）；
});

---

是否有什么东西阻止您将可编辑类添加到内容div，而不是创建新的嵌套div？（即

）