Wrap alle Div dann äußere auszupacken, wenn innere gewickelt ist

Question

den folgenden HTML verwenden (auf JSFiddle):

<div class='table'> 
    <div class='table'></div> 

    <div class='table'> 
    <div class='table'></div> 
    <div class='table'></div> 
    </div> 

    <div class='table'> 
    <div class='table'> 
     <div class='table'></div> 
    </div> 
    <div class='table'> 
     <div class='table'></div> 
    </div> 
    </div> 
</div> 

Ich möchte alle div mit einem neuen div.wrapper wickeln, aber wenn div.wrapper mit einem div.wrapper gewickelt wird dann entfernen

$('div.table').wrap('<div class="wrapper"></div>'); 

New HTML würde wie folgt aussehen:

es, Filter nicht oder etwas anwenden

Answer 1

Da Sie effektiv versuchen, das innerste div in jeden "Zweig" zu wickeln, können Sie die Umbruchlinie in eine if-Anweisung einschließen, die prüft, ob das Element weitere Kandidaten für die Umhüllung enthält.

$('div.table').each(function() { 
 
    if ($(this).find('div.table').length === 0) { 
 
    $(this).wrap('<div class="wrapper"></div>'); 
 
    } 
 
});

div.wrapper {border:2px solid red;margin:10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='table'>do not wrap me 
 
    <div class='table'>inner most table</div> 
 
    <div class='table'>do not wrap me 
 
     <div class='table'>only wrap me</div> 
 
     <div class='table'>only wrap me</div> 
 
    </div> 
 
    <div class='table'>do not wrap me 
 
    <div class='table'>do not wrap me 
 
     <div class='table'>only wrap me</div> 
 
    </div> 
 
    <div class='table'>do not wrap me 
 
     <div class='table'>only wrap me</div> 
 
    </div> 
 
    </div> 
 
</div>