如何删除周围DIV与jQuery?

在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的应补偿怎么过很多标题用户可能主要内容的区域内进行。 所以基本上,无论什么时候,表的内容将始终用一个无序列表包裹,不管有多少列表项有,...

感谢您的帮助!

--------------解决方案-------------

像这样的东西应该工作:

// 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的 时间:2012-01-01 人气:0
本文关键词: HTML,CSS和jQuery
分享到:

相关文章

  • 转换的CSS的jQuery 2012-02-18

    我有这样的CSS: @media only screen and (max-height: 620px) { #howto img { margin-left:150px; } .boilerplate { text-align:right; } .footer .boilerplate .links { float:right; } .footer { text-align:right !important; } } 我想这样做的CSS与jQuery. 我该怎么办呢? ------------

  • 自动调整大小使用HTML,CSS和jQuery离境板 2012-03-26

    我必须建立一个自动缩放抵港及离港板在工作. 它开始时很轻松地与我创建一个表基于百分比列宽(以及整体台面为100%的宽度). 现在,我已经有了一小片的jQuery让我改变了文本的规模,但其只能证明这个概念. 我能够根据现有的屏幕宽度和高度自动缩放字体和表格单元的大小后真的. 我不知道允许每列单元格,所以我可以,potentally,自动设置基于一些计算EM /像素大小的最大字符串长度. 不过,我有点卡住的哪里开始. 我现在积极发展这一点,但我最初的想法是: 规模= maxstringwidth_i

  • 使用CSS和jQuery asp.net网站导航菜单 2012-04-01

    我使用asp.net网站导航与内置asp.net菜单,但是这是很"平淡". 我想申请CSS和jQuery给它一个更好的视觉感观. 我已阅读的基础上http://conceptdevelopment.net/Fun/Superfish/但是各种文章,我真的很喜欢http://apycom.com/menus/1-dim-gray.html?affid=63CS-DR903 是否有任何实例或教程与此类似这是免费的吗? 任何帮助将非常感激. --------------解决方案-------

  • 得到与CSS或jQuery的列摆脱侧边 2012-05-20

    在链路上的代码下面有一个与在正确的列的结果. 您可能需要,如果你有一个小屏幕放大的结果窗口. http://jsfiddle.net/5dw8M/ 问题 我对柱部的两侧边缘. 我想保持的列两侧之间而不是利润率. 怎么样? 创建一个表是不是我的选择. 使用jQuery的答案被接受. 码 如果的jsfiddle以上链接不起作用,这里是代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

  • CSS或jQuery的此表式布局 2012-06-03

    下面的代码我想出布局我的网页. 问题是,这是所有静态定义. 我想为这是动态的,即改变基于用于观看浏览器的尺寸大小. 我敢肯定,所有的div的可以固定在尺寸为特定的页面尺寸. 菜单和内容窗格应该是调节到适合的div. 内容的div将滚动的必要. 我能做到这一点与CSS或jQuery的将是必要的 - 或者是有一个更好的方法彻底? 谢谢,埃里克 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

  • PHP的foreach,CSS和jQuery的脚本。如何互动? 2012-07-22

    我试图使用jQuery的显示/隐藏脚本在PHP文件,它是这样的: <?php foreach ($empresas as $empresa) { echo "<style type='text/css'> .$empresa[teaserid] { width:100%; background-color: #CCC; color: #000; margin-top:10px; border:1px solid #CCC; position:relative; vertical

  • 只需设置宽度与CSS或jQuery的或许 2012-07-30

    <table border="1"> <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"&

  • 构建步骤进度条(CSS和jQuery) 2012-08-24

    你见过这种类型的像贝宝网站进度条的迭代. 一个人如何去设置此功能使用CSS和jQuery? 我有4页,每页是一步...所以4个步骤. --------------解决方案------------- 我搜索的结果将可视化我的Web应用程序步骤的解决方案. 我发现斯蒂芬·托马斯以下优良写了: 在纯CSS进展跟踪 在他的做法甚至托马斯逃脱只使用CSS - 没有使用Javascript! 在本质上,从他的文章下面的CSS代码的伎俩对我来说: <style> <!-- Progress with

  • 为什么我不能能够得到这个GridView中的CSS和jQuery的影响? 2012-09-06

    我试图用大约在我的项目(​​冻结GridView的标题和列滚动时的内容其余部分)这个好文章,但我失败了. 我也跟着在帖子中提到的所有步骤,但我仍然没有得到它,我不知道为什么. 我在GridView的数据,但没有CSS和JQuery效果. 我得到了错误的标志就在IE浏览器它说左下角: 焦炭:9 错误:0.offsetHeight'为空或不是对象 代码:0 此外,有时它给了我下面的错误: 焦炭:11 错误:对象不支持此属性或方法 代码:0 顺便说一句,当我删除了在ASP.NET代码中存在以下CSS样

  • 如何指定路径,同时使用CSS和jQuery在HTML动画对象要遵循 2012-10-24

    我有点击时与下列的圆形路径的特定位置来移动的对象的要求. 那怎么可以使用CSS或JQuery的实现. 如果它可以帮助你可以访问这个网站,看看就明白我所想要的目的. 当用户将点击任何菜单项,该菜单项将沿着圆形边缘移动,下面这条道路将取代最里面的一圈. http://8055.in/home 我承认我无法帧的问题很好,但请帮助我. 谢谢. --------------解决方案------------- 该是jQuery的一个圆圈的动画插件 - 你试过了吗? jQuery的圆形动画工作版本

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.345 (s). 10 q(s)