如何使用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应该能够弥补用户在主内容区域中放置的标题数量。因此，无论如何，目录始终会被包装在无序列表中，而不管有多少列表项...谢谢您的帮助！

- Spencer B.

---

有没有一个元素可以将wikispaces上丑陋的代码列表包裹起来？比如在整个代码块周围加上<div></div>？ - Doug Neiner

是的。这是上面目录锚点链接的包装器：<div id="toc"> <h1 class="nopad">目录</h1> - Spencer B.

好的，很酷，我更新了我的答案，使它更加简单明了。 - Doug Neiner

@Spencer 我今晚不在，但祝你的项目好运！如果你付出了这么多努力，我知道它会变得非常棒！ - Doug Neiner

非常感谢你，道格！祝你晚安。期待向你展示完成的项目。 - Spencer B.

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

- Doug Neiner

---

+1 这肯定可行。我看过类似的解决方案，只需获取 div，获取其内容，然后将其添加到 before() div 中，最后删除 div。实际上，我今天刚看到了类似的东西：https://dev59.com/qXI-5IYBdhLWcg3wEEDu - Ben Lesh