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

时间：2023-01-22 20:34:23

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,当你添加一个目录主要内容区域,任何标题(h1-h6)您使用在主要内容区域自动放置在目录中,并且作为一个锚的链接,当点击时,需要你的页面标题引用表的内容。

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...

默认情况下，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>

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.

我想完全删除丑陋和不必要的嵌入式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>

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...

jQuery应该补偿用户在主内容区域中放置的标题数量。所以基本上，不管怎样，目录总是被一个无序列表包围着，不管有多少个列表项。

Thanks for your help!

谢谢你的帮助!

1 个解决方案

#1

8  

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

#1

8  

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);
})
标签：

相关文章