jQuery memintas kod rentetan panjang_jquery yang ditentukan-tutorial js-php.cn

jQuery memintas kod rentetan panjang_jquery yang ditentukan

WBOY

Lepaskan： 2016-05-16 16:39:01

asal

1782 orang telah melayarinya

Contoh, memintas kod rentetan.

<!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>

Salin selepas log masuk

Kod di atas melaksanakan fungsi memintas rentetan.

1. Prinsip pelaksanaan

Dapatkan panjang teks dalam div, dan kemudian bandingkan dengan panjang yang ditentukan oleh had atribut Jika ia melebihi panjang, gunakan panjang pemintas yang ditentukan, dan kemudian gantikannya dengan....

2. Kod komen

1.jQuery.fn.limit=function(){} digunakan untuk melanjutkan fungsi contoh untuk jQuery Objek jQuery boleh memanggil fungsi ini.
2.var self = $("div[limit]"), digunakan untuk mendapatkan koleksi objek div dengan atribut had.
3.self.each(function(){ }, anda boleh mendapatkan setiap objek dalam koleksi objek div untuk melintasi dan melaksanakan fungsi yang ditentukan sekali.
4.var objString = $(this).text(), dapatkan kandungan teks dalam elemen div, di mana ini merujuk kepada div semasa apabila fungsi each() melintasi.
5.var objLength = $(this).text().length, dapatkan panjang kandungan teks dalam div semasa.
6.var num = $(this).attr("limit"), dapatkan nilai atribut had dalam div, yang digunakan sebagai panjang aksara yang ditentukan di sini.
7.if(objLength > num){}, jika panjang kandungan teks dalam div lebih besar daripada panjang yang ditentukan, kod yang ditentukan akan dilaksanakan.
8.$(this).attr("title",objString), menetapkan nilai atribut tajuk div kepada kandungan dalam div.
9.objString = $(this).text(objString.substring(0,num) "..."), memintas rentetan panjang yang ditentukan dan gunakan elips untuk menggantikan lebihan.