Maison > Article > interface Web > jQuery intercepte le code de chaîne de length_jquery spécifié

jQuery intercepte le code de chaîne de length_jquery spécifié

WBOYoriginal: 2016-05-16 16:39:011755parcourir

Exemple, interceptez le code de chaîne.

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

Le code ci-dessus implémente la fonction d'interception de chaînes.

1.Principe de mise en œuvre

Récupérez la longueur du texte dans le div, puis comparez-la avec la longueur spécifiée par la limite d'attribut. Si elle dépasse la longueur, utilisez la longueur spécifiée par l'interception, puis remplacez-la par....

2. Commentaires du code

1.jQuery.fn.limit=function(){} est utilisé pour étendre une fonction d'instance pour jQuery L'objet jQuery peut appeler cette fonction.
2.var self = $("div[limit]"), utilisé pour obtenir une collection d'objets div avec des attributs limit.
3.self.each(function(){ }, vous pouvez demander à chaque objet de la collection d'objets div de parcourir et d'exécuter la fonction spécifiée une fois.
4.var objString = $(this).text(), récupère le contenu du texte dans l'élément div, où this fait référence au div actuel lorsque la fonction each() traverse.
5.var objLength = $(this).text().length, obtient la longueur du contenu du texte dans le div actuel.
6.var num = $(this).attr("limit"), obtenez la valeur de l'attribut limite dans le div, qui est utilisée comme longueur de caractère spécifiée ici.
7.if(objLength > num){}, si la longueur du contenu du texte dans le div est supérieure à la longueur spécifiée, le code spécifié sera exécuté.
8.$(this).attr("title",objString), définit la valeur de l'attribut title du div sur le contenu du div.
9.objString = $(this).text(objString.substring(0,num) "..."), intercepte la chaîne de longueur spécifiée et utilise des points de suspension pour remplacer l'excédent.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：effets spéciaux de défilement d'images wap sans éléments css3 compétences en écriture de script js pur_javascriptArticle suivant：effets spéciaux de défilement d'images wap sans éléments css3 compétences en écriture de script js pur_javascript

Articles Liés

Voir plus