css和jQuery ,字符串中重新定义单个字符样式背景
2015-12-25 11:05
691 查看
<table class="tb2"> <tr><td class="td1">融资登记企业<span>985</span>个</td><td class="td2">融资项目数量<span>985</span>个</td><td class="td3">融资需求金额<span>985</span>万元</td></tr> <tr><td>完成融资企业<span>00008</span>个</td><td>完成融资数量<span>985</span>个</td><td>完成融资金额<span>985</span>万元</td></tr> </table>
背景图 .tb2 td span i{background:url(../images/numbg.png) no-repeat 0px 0; display:inline-block; font-size:20px;color:#ff0000;font-weight:bold;font-family:Arial;line-height:30px;display:inline-block;height:28px;width:27px;text-align:center;font-style:normal}
$(".tb2 td span").each(function () {//遍历每个span元素 var str = $(this).text(); var arr = str.match(/./g); //将元素中的单个字符组成数组 var str2 = ""; for (var i = 0; i < arr.length; i++) { str2 += arr[i].replace(arr[i], "<i>" + arr[i] + "<\/i>"); //将数组元素替换,并且带有i标签 } $(this).html(str2); //对当前元素进行新的赋值,例如将数字985替换为<i>9</i><i>8</i><i>5</i>的格式 });
最终效果
如果用背景平铺和letter-spacing,是达不到这种效果的,数字的前面和后面部分都会有一小段出现
相关文章推荐
- [转]关于jquery中html()、text()、val()的区别
- [转]jquery 点击表格变为input可以修改无刷新更新数据
- jquery盒模型元素尺寸设置
- jQuery提示插件alertify使用指南
- jQuery Select的操作集合
- seajs模块化jQuery与jQuery插件【转】
- jquery图片轮播
- javascript,jQuery,trim()
- jQuery实现模仿微博下拉滚动条加载数据效果
- jQuery dataTable使用详解
- jquery选择器总结
- 2016年将成为IT新元年
- jquery.cookie.js用法实例详解
- 基于jquery实现省市区三级联动效果
- Jquery操作表格
- 数组方法汇总
- 基于jquery实现省市区三级联动效果
- jquery.cookie.js用法实例详解
- jQuery实现模仿微博下拉滚动条加载数据效果
- 基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)