css和jQuery ,字符串中重新定义单个字符样式背景
<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 = ; 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,是达不到这种效果的,数字的前面和后面部分都会有一小段出现
css和jQuery ,字符串中重新定义单个字符样式背景的更多相关文章
- iOS 获取字符串中的单个字符
要取到单个字符,就要知道字符串的编码方式,这样才能够定位每个字符在内存中的位置.但是,iOS的字符串编码是不固定的,因此,需要设置一个统一的编码格式,将所有其他格式的字符串都转化为统一的格式,然后就可 ...
- 发现IE7的一个问题,不能用索引取字符串中的单个字符
如下javascript: var testValue="hello,world"; alert(testValue[]); 在IE7上运行该代码,竟然提示值为"unde ...
- JavaScript替换字符串中最后一个字符
1.问题背景 在一个输入框中,限制字符串长度为12位.利用键盘输入一个数字,会将字符串中最后一位替换,比方:111111111111.再输入一个3,会显示111111111113 2.详细实现 < ...
- C语言考题:输入一个字符串,将此字符串中特定的字符删去后, 显示新的字符串,要求用函数来完成删去字符的操作。
#include <stdio.h> #include <string.h> /*此题只需要删除单个字符,比较简单.相信大家也能做出来的.我这个也是可以实现的.只是加了两个判断 ...
- JAVA----编程列出一个字符串的全字符组合情况,原始字符串中没有重复字符
package com.pb.demo.packclass.demo1; import java.util.HashSet; /** * 编程列出一个字符串的全字符组合情况,原始字符串中没有重复字符 ...
- c# 过滤字符串中的重复字符
有字符串"a,s,d,v,a,v",如果想去除其中重复的字符,怎么做? 下面是一个方法,用Hashtable来记录唯一字符,排除重复字符,仅供参考. 1.过滤方法: public ...
- oracle中一个字符串包含另一个字符串中的所有字符
oracle中一个字符串包含另一个字符串中的所有字符 --解决监理报告中所勾选的标段信息,与该用户所管理的标段字符串不匹配的问题. select * from a where instr(a,b)&g ...
- Linux c字符串中不可打印字符转换成16进制
本文由 www.169it.com 搜集整理 如果一个C字符串中同时包含可打印和不可打印的字符,如果想将这个字符串写入文件,同时方便打开文件查看或者在控制台中打印出来不会出现乱码,那么可以将字符串中的 ...
- 三种java 去掉字符串中的重复字符函数
三种java 去掉字符串中的重复字符函数 public static void main(string[] args) { system.out.println(removerepeatedchar( ...
随机推荐
- thinkphp中的分表方法
public function getPartitionTableName($data=array()) { // 对数据表进行分区 if(isset($data[$this->partitio ...
- day02 Java基础
1.Java中的关键字都是小写的. 2.Java中的关键字 3.Java中的注释分为:单行注释.多行注释.文档注释 文档注释将被javadoc工具解析生成一个说明书. 4.Java中的常量分为字面值常 ...
- cocos2d-x lua 实现单例(管理类)
cocos2d-x lua 实现单例(管理类) version: cocos2d-x 3.6 示例代码 local DogManager = class("DogManager") ...
- 加载程序到android虚拟机报错: android.widget.RelativeLayout cannot be cast to android.widget.Button
05-23 02:53:48.416: E/Trace(875): error opening trace file: No such file or directory (2) 05-23 02:5 ...
- MYSQL基础笔记(一)
关系型数据库概念: 1.什么是关系型数据库? 关系型数据库:是一种建立在关系模型(数学模型)上的数据库 关系模型:一种所谓建立在关系上的模型. 关系模型包含三个方面: 1.数据结构:数据存储的问题,二 ...
- Advanced Installer
Advanced Installer是一款功能强大.可生成符合 MS Windows 认证的 Windows Installer 的 MSI 安装包制作工具,具有友好的图形用户界面,直观而且非常简单的 ...
- Android数据库的使用
学了web好久没继续做,现在做android开发断断续续也近一年了,实习是android,现在毕业了工作也是android,但是对于数据库这块由于最近项目需要就研究了下其常用操作,这篇博客中的观点仅代 ...
- Kafka分布式消息模型
Kafka开发的主要初衷目标是构建一个用来处理海量日志,用户行为和网站运营统计等的数据处理框架.在结合了数据挖掘,行为分析,运营监控等需求的情况下,需要能够满足各种实时在线和批量离线处理应用场合对低延 ...
- android代码片段二
1.Android拦截短信 一.AndroidManifest.xml <uses-permission android:name="android.permission.RECE ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...