Implementation principle and code of jQuery intercepting strings of specified length

Implementation principle and code of jQuery intercepting strings of specified length_jquery

WBOY

Release： 2016-05-16 16:42:39

Original

1321 people have browsed it

The operation of intercepting a string of specified length is widely used in website construction, especially in operations such as news lists.

The following is an example of intercepting string code:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>jQuery截取字符串操作</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<style> 
* 
{ 
margin:0; 
padding:0; 
font-family:"宋体", Arial, Helvetica, sans-serif; 
} 
#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">这边有优化很边有优化很边有优化很边有优化很边有优化很</div> 
</div> 
</body> 
</html>

Copy after login

The above code implements the function of intercepting strings. Here is a brief introduction to how it achieves this effect:

1. Implementation principle:
Get the length of the text in the div, and then compare it with the length specified by the attribute limit. If it exceeds the length, use the interception specified length, and then replace it with....

2. Code comments:
1.jQuery.fn.limit=function(){} is used to extend an instance function for jQuery. The jQuery object can call this function.
2.var self = $("div[limit]"), used to obtain a collection of div objects with limit attributes.
3.self.each(function(){ }, you can get each object in the div object collection to traverse and execute the specified function once.
4.var objString = $(this).text(), get the text content in the div element, where this refers to the current div when the each() function traverses.
5.var objLength = $(this).text().length, get the length of the text content in the current div.
6.var num = $(this).attr("limit"), get the limit attribute value in the div, which is used as the specified character length here.
7.if(objLength > num){}, the length of the text content in the div is greater than the specified length, this executes the specified code.
8.$(this).attr("title",objString), sets the value of the title attribute of the div to the content in the div.
9.objString = $(this).text(objString.substring(0,num) "..."), intercept the specified length string, and replace it with ellipses if it exceeds.