【代码如诗】用简单构造不简单,几行代码实现标题自动编号

2015-03-25 10:10 栏目:技术开发 查看(6777)

湖南幸运赛车爱彩人彩票网 www.schu9.cn 俗话说内行看门道、外行看热闹,对于外行来说写代码是一件自己感觉高大上但又感觉枯燥乏味的事情,自己总是觉得程序猿写代码很酷,但自己去尝试的时候就会感觉太犯晕了。相信很多人都在曾想过,是神马让程序猿攻城狮坚持下去,当然首当其冲的理由肯定是为了生活,但除此之外我觉得更重要的就是自己的喜好。下面就一个只要稍微接触程序设计的朋友都能看得懂的一个问题,来聊聊这些。

242

看到上面这张图片会想到什么?当然大家想不到,我就告诉大家吧,其实这种风格大家见过,知识有所差异的,那就是百度百科的词条,当然这个例子没百度百科那个复杂。也就是给文章中的标题排上序号,并自动加上一些风格。

我们知道在很多编辑器中都会有自动插入h1这个标签,比如wordpress的默认编辑器的一级标题其实就是在文本上套个h1标签。那么如果是一个单纯的h1标签,要实现自动编号以及加上附加的风格似乎有点儿问题。比如上面一部分的标题风格如果让我们写静态的html+css文档,我们会这么写(当然CSS部分针对不同的地方具体的属性及值不同,而且html结构也可以不同)。

<style>
h1 {margin: 15px 0 15px 0;text-align: left;margin-bottom: 20px;font-size: 16px;line-height: 1em;background: url(images/titleEditLine.png) center;}
h1 i {padding: 0 8px;background: #0096A5;font-size: 14px;color: #fff;}
em {padding: 0 15px 0 8px;background: #fff;}
</style>
<h1><i>1</i><em>讲授课程</em></h1>

但实际上我们一个普通的编辑器默认情况下html的结构不太可能这样,因为现在的状态是h1里面包含了i和em,而实际上更多的时候编辑器出来的结果是这样的。

<h1>讲授课程</h1>

也就是我们得想个法子让编辑器里面出来的结果快速处理后呈现给用户加了i和em并自动编号,那么从前端来讲我们自然想到无孔不入的javascript了。其实使用到的技术很简单,可以说是入门级别的技术,但重要的是要想得到,我觉得这个过程就是感觉特别好的一个过程。
首先我们来讲下基本原理:我们应该获取到文章中h1的节点,因为我们要改变的文章中的h1,页面其他的地方的h1我们不需要改变;然后我们得在在这个h1里面加上两个标签,同时在其中的一个标签中加入序号。下面就以jquery代码来演示。

<script>
var h1=$(".article .cont h1"); //获取到文章中所有的h1节点
h1.wrapInner("<em></em>");  //为获取到的所有节点的文本套上<em>
for(i=0;i<h1.length;i++){
h1.eq(i).prepend("<i>"+(i+1)+"</i>"); //遍历节点并依次加上序号
}
</script>

微构网络虽然是长沙地区刚刚成立的网络公司,但是我们会用我们的实力认真对待每一个项目,因为我们的发展需要得到更多客户的认可;如果大家有网站建设(不是套模版的需求,定制的需求)请与我们取得联系哟。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:【代码如诗】用简单构造不简单,几行代码实现标题自动编号 - 微构网络
分享:
  • 我国农村金融取得长足发展 2019-05-27
  • 世界自然遗产旅行地中国国家地理网 2019-05-27
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 360| 180| 886| 578| 206| 686| 483| 982| 489| 878|