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

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

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

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小时期待你的声音

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

转载请注明出处:【代码如诗】用简单构造不简单,几行代码实现标题自动编号 - 微构网络
分享: