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

因为你有效地试图在每个＆＃34;分支＆＃34;中包裹最里面的div。您可以将包装行包装在if语句中，该语句检查该元素是否包含任何其他候选包。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果内部被包裹，则包裹所有div然后展开外部

1 个答案: