Можно ли скрыть текст в DIV после нескольких символов с помощью jQuery?
До сих пор я думаю, что это будет похоже на это: jQuery будет циклически перебирать текст до тех пор, пока он не достигнет определенного количества символов. Затем он будет обертывать DIV с этой позиции до конца текста, который затем может быть скрыт с помощью метода hide(). Я не уверен, как вставить этот текст обертки.
Также можно было бы оценить любой другой способ.
Спасибо.
Это скроет часть текста
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
.hide{
display: none;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
var $elem = $('p'); // The element or elements with the text to hide
var $limit = 10; // The number of characters to show
var $str = $elem.html(); // Getting the text
var $strtemp = $str.substr(0,$limit); // Get the visible part of the string
$str = $strtemp + '<span class="hide">' + $str.substr($limit,$str.length) + '</span>'; // Recompose the string with the span tag wrapped around the hidden part of it
$elem.html($str); // Write the string to the DOM
})
</script>
</head>
<body>
<p>Some lenghty string goes here</p>
</body>
</html>
Я думаю, что цель может быть решена гораздо проще, чем описано выше
$(function(){
$(".title").each(function(i){
len=$(this).text().length;
if(len>10)
{
$(this).text($(this).text().substr(0,10)+'...');
}
});
});
Вышеупомянутый код jquery скроет div-текст, если он превышает 10 символов, а также объявления... в конце, чтобы объяснить, что есть что-то еще.
Jeff У меня была такая же проблема, как хотелось бы добавить ограничитель текста в динамический контент, поэтому вот мое решение:
// TEXT CHARACTER LIMITER
$(document).ready(function() {
$.fn.textlimit = function()
{
return this.each(function()
{
var $elem = $(this); // Adding this allows u to apply this anywhere
var $limit = 22; // The number of characters to show
var $str = $elem.html(); // Getting the text
var $strtemp = $str.substr(0,$limit); // Get the visible part of the string
$str = $strtemp + '<span class="hide">' + $str.substr($limit,$str.length) + '</span> ...';
$elem.html($str);
})
};
});
// Call the text limiter above
$(document).ready(function() {
$('.someGenericClass .anotherClass').textlimit()
});
Я заменяю свой оригинальный ответ на этот........
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var limit = 20;
var chars = $("#myDiv").text();
if (chars.length > limit) {
var visiblePart = $("<span> "+ chars.substr(0, limit-1) +"</span>");
var dots = $("<span class='dots'>... </span>");
var hiddenPart = $("<span class='more'>"+ chars.substr(limit-1) +"</span>");
var readMore = $("<span class='read-more'>Read More</span>");
readMore.click(function() {
$(this).prev().remove(); // remove dots
$(this).next().show();
$(this).remove(); // remove 'read more'
});
$("#myDiv").empty()
.append(visiblePart)
.append(dots)
.append(readMore)
.append(hiddenPart);
}
});
</script>
<style type="text/css">
span.read-more { cursor: pointer; color: red; }
span.more { display: none; }
</style>
</head>
<body>
<div id="myDiv">Here are all<br/> my characters.<br/> I would like to limit them to 20.</div>
</body>
</html>
$.fn.textlimit = function(limit)
{
return this.each(function(index,val)
{
var $elem = $(this);
var $limit = limit;
var $strLngth = $(val).text().length; // Getting the text
if($strLngth > $limit)
{
$($elem).text($($elem).text().substr( 0, $limit )+ "...");
}
})
};
**how to use**
$("#DivId").textlimit(60);
Если вы поместите обработчик события onkeydown в тег body, вы можете подсчитать длину в div интереса, а затем вы можете скрыть его, когда закончите, и удалить обработчик событий.