我如何用jQuery去除周围的DIV？ [英] How Can I Remove a Surrounding DIV with jQuery?

问题描述

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

In Wikispaces, when you add a Table of Contents to the Main Content area, any heading (h1-h6) you use within that main content area is automatically placed within the table of contents, and serves as an anchor link that when clicked on, takes you down the page to the heading referenced from the table of contents.

默认情况下，wikispaces用div包围目录内的锚链接，这取决于您在主要内容区域（h1-h6）内使用的标题，它会对其应用更大的左边距。这里是仅有h2标题的目录的标记......

By default, wikispaces surrounds the anchor links within the table of contents with a div, which depending upon the heading you're using within the main content area (h1-h6), it applies a greater left margin to it. Here's the markup of the table of contents of only h2 headings...

<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，上面的标记将被转换为更多的语义标记......一个无序的列表。

I'd like to completely remove the ugly and unnecessary embedded CSS styling DIV's, and wrap the table of contents with an unordered list, with the anchor links wrapped with list items. So using jQuery, the markup above would be transformed to more semantic markup... an unordered list.

<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应该补偿用户在主要内容区域可能放置的标题。因此，无论如何，无论如何，无论内容列表中有多少列表项目，无论如何，内容列表都将被无序列表包装。

The jQuery should compensate for how ever many headings the user might place within the main content area. So basically, no matter what, the table of contents will always be wrapped with an unordered list, regardless of how many list items there are...

感谢您的帮助！

Thanks for your help!

推荐答案

类似这样的应用程序应该可以工作：

Something like this should work:

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

这篇关于我如何用jQuery去除周围的DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！