如何使用jQuery删除周围的DIV？

Question

在Wikispaces中,当您将目录添加到主内容区域时,您在该主要内容区域中使用的任何标题(h1-h6)将自动放置在内容列表中,并作为单击时的锚点链接,将您从页面转到目录中引用的标题.

默认情况下,wikispaces使用div围绕内容列表中的锚链接,这取决于您在主内容区域(h1-h6)中使用的标题,它会向其应用更大的左边距.这是仅h2标题的目录的标记......

<div style="margin-left: 2em;"><a href="#toc1">Hello there</a></div>
<div style="margin-left: 2em;"><a href="#toc2">How are you?</a></div>
<div style="margin-left: 2em;"><a href="#toc3">Here's an External Link</a></div>
<div style="margin-left: 2em;"><a href="#toc4">Here's an Example Heading</a></div>
<div style="margin-left: 2em;"><a href="#toc5">Here's an Even Longer Example Heading</a></div>

我想完全删除丑陋且不必要的嵌入式CSS样式DIV,并使用无序列表包装目录,其中锚链接包含列表项.因此,使用jQuery,上面的标记将转换为更多的语义标记......一个无序列表.

<ul>
<li><a href="#toc1">Hello there</a></li>
<li><a href="#toc2">How are you?</a></li>
<li><a href="#toc3">Here's an External Link</a></li>
<li><a href="#toc4">Here's an Example Heading</a></li>
<li><a href="#toc5">Here's an Even Longer Example Heading</a></li>
</ul>

jQuery应该补偿用户可能在主要内容区域中放置的标题.所以基本上,无论如何,无论有多少列表项,目录总是会被无序列表包裹起来......

谢谢你的帮助!

Answer 1

这样的事情应该有效:

// Insert a UL after the h1 tag
var $ul = $("<ul></ul>").insertAfter($("div#toc > h1"));

// Find all the toc links
$("a[href^=#toc]").each(function(){
    var $li = $("<li></li>"),
        $parent = $(this).parent();

    // Append auto deletes it from its old position
    $li.append(this);

    // Remove the empty div
    $parent.remove();

    // Add the li to the ul
    $ul.append($li);
})