包裝所有的div那麼如果內被包裹

Question

使用下面的HTML（上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> 

我想包裝所有div用新div.wrapper，但如果div.wrapper是包裹着一個div.wrapper然後取出它，過濾掉不應用它或東西：

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

新的HTML應該是這樣的：

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

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

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

Answer 1

由於您正在有效地嘗試在每個「分支」中包裝最裏面的div，因此您可以將包裝線包裝在if語句中，該語句檢查元素是否包含任何進一步包裝的候選項。

$('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>