包装所有的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>