Question

我需要用以下方式用div-container包装所有p-和ul-元素：

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

在这段代码中，只包含了p元素。我如何更改代码以包装p-和ul-元素。两者都应该以同样的方式对待。

<p>Test</p>
<ul><li>Test</li></ul>
<p>Test</p>

在这种情况下，所有三个元素都应包装为：

<div class="editable">
    <p>Test</p>
    <ul><li>Test</li></ul>
    <p>Test</p>
</div>

更新：这可能是一个示例内容：

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

我首先尝试了这个答案Wrapping p- and ul-elements in the same container。但它需要部分$(this).nextUntil('div, section').addBack().wrapAll("<div class='editable' />")

那么，这是正确的还是我可以让它（$('.content> p, #article> p, .content> ul, #article> ul')）更容易一点？

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

Answer 1

喜欢这个？

$('p, ul').each(function () {
    if (!$(this).closest('.editable').length) $(this).wrapAll("<div class='editable' />");
});

http://jsfiddle.net/jY7UW/

包裹p-和ul-元素

1 个答案: