jQuery は指定された長さの文字列コードをインターセプトします

jQuery は指定された長さの文字列コードをインターセプトします_jquery

WBOY

リリース： 2016-05-16 16:39:01

オリジナル

1781 人が閲覧しました

例、文字列コードをインターセプトします。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery截取字符串操作---www.jb51.net</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>

ログイン後にコピー

上記のコードは、文字列をインターセプトする機能を実装しています。

1. 実装原則

div 内のテキストの長さを取得し、属性制限で指定された長さと比較し、長さを超えている場合は、インターセプトで指定された長さを使用し、... に置き換えます。

2. コードのコメント

1.jQuery.fn.limit=function(){} は、jQuery のインスタンス関数を拡張するために使用され、jQuery オブジェクトはこの関数を呼び出すことができます。
2.var self = $("div[limit]")、limit 属性を持つ div オブジェクトのコレクションを取得するために使用されます。
3.self.each(function(){ }、div オブジェクトコレクション内の各オブジェクトを取得して、指定された関数を 1 回走査して実行できます。
4.var objString = $(this).text()、div 要素内のテキストコンテンツを取得します。ここで、this は each() 関数が通過するときに現在の div を参照します。
5.var objLength = $(this).text().length、現在の div 内のテキストコンテンツの長さを取得します。
6.var num = $(this).attr("limit")、div内のlimit属性値を取得します。これは、ここで指定された文字長として使用されます。
7.if(objLength > num){}、div 内のテキストコンテンツの長さが指定された長さより大きい場合、指定されたコードが実行されます。
8.$(this).attr("title",objString) は、div の title 属性の値を div 内のコンテンツに設定します。
9.objString = $(this).text(objString.substring(0,num) "...")、指定された長さの文字列をインターセプトし、それを超える場合は省略記号に置き換えます。