我怎样才能将div与另一个类分开？

Question

在我的基于WordPress的网站中，插件会自动用<ul></ul>包装帖子内容中的每个元素。即使是无效的<div>，它也包装了所有内容。

我想解开某些元素并尝试jQuery .unwrap。但我能够解开一些除了几个div元素之外的元素。

以下是代码：

<div class="post-content">
  <p>Example post content</p>
  <ul class="plugin_class">
    <li>test</li>
    <li>test</li>

    <ul>
      <div class="button-main-wrap">
        <span class="button-abc">
                                <span>
                                        <a href="http://test.com">Website link</a>
                                </span>
        </span>
        <span class="button-abc"></span>
        <span class="button-abc"></span>
      </div>
    </ul>

    <ul>

      <div class="number">hundred</div>
      <div class="number">thosand</div>
    </ul>
  </ul>
  <div>
    <div>This content is okay</div>
    <div>This content is okay</div>
  </div>
</div>

从上面的代码中，我想将<div class="button-main-wrap">与<ul class="plugin_class">分开，或者停止<ul class="plugin_class">来包装不属于它的元素。例如：div <div class="button-main-wrap">或其他元素，例如<div class="number">。

我试过这些：

jQuery("ul").find('.button-main-wrap').unwrap();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-content">
  <p>Example post content</p>
  <ul class="plugin_class">
    <li>test</li>
    <li>test</li>

    <ul>
      <div class="button-main-wrap">
        <span class="button-abc">
                                <span>
                                        <a href="http://test.com">Website link</a>
                                </span>
        </span>
        <span class="button-abc"></span>
        <span class="button-abc"></span>
      </div>
    </ul>

    <ul>

      <div class="number">hundred</div>
      <div class="number">thosand</div>
    </ul>
  </ul>
  <div>
    <div>This content is okay</div>
    <div>This content is okay</div>
  </div>
</div>

这会打开我不想要的<ul>中的所有.post-content元素。

jQuery(".plugin_class").find('.button-main-wrap').unwrap();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-content">
  <p>Example post content</p>
  <ul class="plugin_class">
    <li>test</li>
    <li>test</li>

    <ul>
      <div class="button-main-wrap">
        <span class="button-abc">
                                <span>
                                        <a href="http://test.com">Website link</a>
                                </span>
        </span>
        <span class="button-abc"></span>
        <span class="button-abc"></span>
      </div>
    </ul>

    <ul>

      <div class="number">hundred</div>
      <div class="number">thosand</div>
    </ul>
  </ul>
  <div>
    <div>This content is okay</div>
    <div>This content is okay</div>
  </div>
</div>

这没有做任何事情。

我将所有代码放在这个Fiddle中。

如何分隔div并停止不必要地包装元素？

Answer 1

这是因为div不是ul的有效子项，所以用ul包装li的内容然后打开li元素，父ul将被删除

$('.plugin_class > ul').each(function(){
    $(this).wrapInner('<li />').contents().unwrap()
})

演示：Before，After