Question

我需要通过JQuery用div-container（class = editable）包装所有p和ul-Elements。同一＆＃34;内容＆＃34; -Container中的所有元素都应包含在同一个可编辑容器中。

所以这个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>

......应该成为这个......

<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>

我正在使用此代码：

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

...这适用于每个p元素。但是我该如何修改它，所以ul-Elements（带有内部li-Elements）的处理方式就像p元素一样？他们也应该被包裹。

Answer 1

您可以简单地遍历元素并包装他们的p和ul子项：

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

http://jsfiddle.net/7Le9r/

将p-和ul-元素包装在同一容器中

1 个答案: