如何將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> 

這將解包我不需要的.post-content所有<ul>元素。

 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()
})

演示： 之前 ， 之后