Question

我需要一个如何用JS（Jquery）来解决这个问题的建议：

<div id="main">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <section class="box_1">
        <header class="trigger trigger_aktiv"><h2>TITLE</h2></header>
        <div class="CONTENT">
            <div class="box_delete"></div>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&nbsp;</p>
            <div class="box_2">
                <div class="box_delete"></div>
                <div class="CONTENT">
                    <p>At vero eos et accusam et justo duo dolores et ea rebum.&nbsp;</p>
                    <div class="box_3">
                    <div class="box_delete"></div>
                        <div class="CONTENT">
                            <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box_2">
                <div class="box_delete"></div>
                <div class="CONTENT">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&nbsp;</p>
                </div>
            </div>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </section>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.&nbsp;</p>

    <section class="box_1">
        <header class="trigger trigger_aktiv"><h2>TITLE</h2></header>
        <div class="CONTENT">
            <div class="box_delete"></div>
            <div class="box_2">
                <div class="box_delete"></div>
                <div class="CONTENT">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&nbsp;</p>
                    <div class="box_3">
                        <div class="box_delete"></div>
                        <div class="CONTENT">
                        <p>At vero eos et accusam et justo duo dolores et ea rebum.&nbsp;</p>
                        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&nbsp;</p>
                        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&nbsp;</p>
</div>

在这里你可以看到，有一个嵌套的div-container，类为＃34; .content＆＃34;。我想防止这种情况。在具有相同类的另一个容器中永远不应该有.content-div-container。

需要.content-class才能使此内容可编辑。

我只需要一些想法，我能做什么。我的计划是：

1）检查是否有嵌套元素 2）转换容器。 [我应该使用第二堂课（比如＆＃34;内容＆＃34;和＃34;可编辑＆＃34;）并创建一些可编辑的＆＃34; -container？但是如何创建所需的新容器？]

编辑：

对于第一部分，输出可能是这样的：

    <section class="box_1">
        <header class="trigger trigger_aktiv"><h2>TITLE</h2></header>
        <div class="CONTENT">
            <div class="box_delete"></div>
            <div class="EDITABLE">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&nbsp;</p>
            </div>
            <div class="box_2">
                <div class="box_delete"></div>
                <div class="CONTENT">
                    <div class="EDITABLE">
                        <p>At vero eos et accusam et justo duo dolores et ea rebum.&nbsp;</p>
                    </div>
                    <div class="box_3">
                    <div class="box_delete"></div>
                        <div class="CONTENT">
                                                        <div class="EDITABLE">
                            <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&nbsp;</p>
                                                        y</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box_2">
                <div class="box_delete"></div>
                <div class="CONTENT">
                                         <div class="EDITABLE">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&nbsp;</p>
                                         </div>
                </div>
            </div>
            <div class="EDITABLE">
                <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </section>
    <div class="EDITABLE">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.&nbsp;</p>
    </div>

Answer 1

第一部分：http://api.jquery.com/wrap/

$(.CONTENT>p).wrap('<div class="EDITABLE" ></div>');

JQuery：防止嵌套元素

1 个答案: