注册
其实我可以理解乐天,毕竟韩国是它的国家,所以也请理解我们抵制乐天,因为中国也是我们的国家

使用jQuery截取指定长度文字、标题

嗨豆壳技术文章 时间:2014-08-23 16:07:38 [ray]

一.实现原理

获取div中文本的长度,然后和通过和属性limit规定的长度进行对比,如果超出长度则使用截取指定的长度,后面用...替代。

<!DOCTYPE HTML> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery截取字符串---www.hi-docs.com</title> 
<script type="text/javascript" src="//libs.baidu.com/jquery/1.8.3/jquery.js"></script> 
<style> 
* { margin:0; padding:0; } 
#best { 
width:300px; 
height:200px; 
border:1px solid #ccc; 
margin:60px auto 0; 
line-height:1.6; 
font-size:14px; 
padding:10px 0 0 10px 
} 
.blank { font-size:18px; font-weight:bold; text-align:center; padding:20px } 
</style> 
<script type="text/javascript"> 
jQuery.fn.limit = function() { 
    var self = $("div[limit]"); 
    self.each(function(){ 
        var objString = $(this).text(); 
        var objLength = $(this).text().length; 
        var num = $(this).attr("limit"); 
        if(objLength > num){ 
            $(this).attr("title",objString); 
            objString = $(this).text(objString.substring(0,num) + "..."); 
        } 
    }) 
} 
$(function(){ 
    $(document.body).limit(); 
}) 
</script> 
</head><body> 
<div id="best"> 
<div limit="12">百度“冰桶算法”下周正式上线,你怎么看?</div> 
<div limit="10">整个移动互联网生态环境</div> 
<div limit="12">百度移动搜索将针对低质站点及页面进行一系列调整</div> 
<div limit="12">百度移动搜索下周正式上线</div> 
<div limit="10">强行弹窗app下载、用户登录、大面积广告等影响用户正常浏览体验的页面</div> 
</div> 
</body></html>
二.代码注释

jQuery.fn.limit=function(){} 为jQuery扩展一个实例函数,jQuery对象可以调用此函数。

var self = $("div[limit]"),获取具有limit属性的所有div对象集合。

self.each(function(){ },遍历获取到的div对象集合,使每一个对象执行一次指定的函数。

var objString = $(this).text(),获取div元素中的文本内容,这里的this是指当each()函数进行遍历时当前div。

var objLength = $(this).text().length,获取当前div中文本内容的长度。

var num = $(this).attr("limit"),获取div中limit属性值,在这里用作了指定的字符长度。

if(objLength > num){ },如果div中文本内容长度大于指定长度将执行的代码。

$(this).attr("title",objString),将div的title属性值设置为div中的内容。

objString = $(this).text(objString.substring(0,num) + "..."),截取指定长度字符串,超出的用省略号代替。

标签

本文地址:https://www.hi-docs.com/article/62.html

上一篇:PHP报错Notice: Undefined index: ... 的解决方法

下一篇:百度免费IP地址查询API,查询接口