jQuery打造个性有序列表

当遇到有序列表的时候我们一般会用到ol+li这样的标签,因为除了符合语义外其默认样式就有序号标识,这样就免去了我们手动添加的麻烦,但由于浏览器兼容性问题(尤其是IE…)使它的实用性大打折扣,所以要实现有序列表更多的时候是用程序来解决,但通过jQuery我们完全可以在不改变现有结构的情况下打造一个个性化的有序列表.

先来看Demo

实现起来也很简单,看看第一个例子,首先是载入javascript代码

<script type=“text/javascript” src=“js/jquery-1.3.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){

$(“#step li”).each(function (i) {
i = i+1;
$(this).addClass(“item”+i);
});
</script>

经过jQuery处理后,原来的代码将发生变化,jQuery为每个li增加了一个有序的不同类:

有了类之后就好办了,为每个类定义不同的样式表(我为item1,item2…增加了不同的背景图片):

#step .item1 {
background: url(step1.png) no-repeat;
}
#step .item2 {
background: url(step2.png) no-repeat;
}
#step .item3 {
background: url(step3.png) no-repeat;
}

最后的效果:

当然除了图片也可以增加任意你想要的代码,比如第三个例子就是在li中增加一个<span class=”commentnumber”> 容器

<script type=“text/javascript”>

$(“#commentlist li”).each(function (i) {
i = i+1;
$(this).prepend(‘<span class=”commentnumber”> #’+i+‘</span>’);
});

});
</script>

jQuery处理过程:

样式表:

#commentlist li {
position: relative;
}

#commentlist .commentnumber {
position: absolute;
right: 0;
top: 8px;
}

最终效果:

总的来说这种处理方式还是很简单的,而且自由度比较高,最重要的还是无需对结构进行修改.