包裹所有 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.wrapper包裹所有div，但如果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>