JQuery: evitar elementos anidados

I need a advice how to solve this problem with 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>

Here you can see, there are nested div-container with the class ".content". I want to prevent that. There should never be a .content-div-container in another container with the same class.

The .content-class is needed to make this content editable.

I only need some ideas what I can do. My plan is:

1) Check, if there are nested elements 2) Transform the containers. [Should I use a second class (like "content" and "editable") and create some "editable"-container? But how to create the needed new container?]

Edit:

Maybe for the first part the output could be like this:

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

preguntado el 12 de junio de 14 a las 10:06

What you have try and how this html generated? -

algo como $(.CONTENT .CONTENT).remove() ? -

First of all there is only Text. Via JQuery the HTML-Container are added to get the structure. In a next step I want to correct the structure. But I really don't have a clue on how to get that. I don't want a perfect solution, but only some ideas how to take this task. -

@hl037: No. I don't want to remove the container, but get a structure without nested container. -

write what you want in output, I don't really understand the corrections. Then, with the same CSS filter, you can change the classes usind .addClass() and .removeClass -

1 Respuestas

For the first part : http://api.jquery.com/wrap/

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

Respondido el 12 de junio de 14 a las 10:06

I just don't uderstand why some div have 'class="CONTENT EDITABLE"', I assumed it was a mistyped ;) - hl037_

Sorry, mistyping... But in this way I would wrap every single p-element with .editable-div. But I need only one editable-container for this part of the content. I guess I can't explain it well :-( - user3142695

You can add a .first() apply fhis only on the first, or show me an example where my script doesn't work as you want - hl037_

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.