| danik.js | 11.06.2013 01:38 |
Зачем так издеваться то?
Помогите с обрезкой определенного количества строк на jQuery
Вложений: 1
Здравствуйте,
помогите, пожалуйста, реализовать такую вещь: Нужно чтобы скрипт подсчитал количество строк списка (ul li) и после 5 строки обрезался. Точный пример высылаю в приложении. Заранее благодарен |
А ты уверен что это нужно делать на клиенте а не на сервере?
|
Вы просите готовый скрипт с нуля.
Это работа, и за нее обычно платят деньги. Для таких сообщений предназначен раздел форума "Работа". Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. |
Цитата:
На данный момент у меня есть только такой скрипт
jQuery("#secondary div.testimonials-text").each(function(){
var review_full = jQuery(this).html();
var review = review_full;
if( review.length > 150 )
{
review = review.substring(0, 150);
jQuery(this).html( review + '<span class="testimonials_readmore"> читать полностью →</span>' );
}
jQuery(this).append('<div class="full_text" style="display: none;">' + review_full + '</div>');
});
jQuery(".testimonials_readmore").click(function(){
jQuery(this).parent().html( jQuery(this).parent().find(".full_text").html() );
});
он все хорошо работает, но нужно чтобы он не просто обрезал в тупую текст, а чтобы просчитывал строки и обрезал конкретно строки. |
joylord,
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide{
display: none;
}
div {
float: left;
}
div div{
float: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script>
$("div ul").each(function(){
var li = $("li:gt(4)",this);
if (li.size()){
$('<span class="testimonials_readmore"> читать полностью →</span>').appendTo($(this))
li.wrapAll("<div class='hide'></div>");
}
});
$(".testimonials_readmore").click(function(){
$(this).prev().slideToggle()});
</script>
</body>
</html>
|
Зачем так издеваться то?
|
Цитата:
|
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
li.hide {
display: none ;
}
span.testimonials_readmore {
color: red ;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
$("ul").each(function() {
var $this = $(this),
li = $("li:gt(4)", this) ;
if(!li.length)
return ;
li.addClass("hide") ;
$this.append($("<span/>", {
class: "testimonials_readmore",
html: "Читать полностью →"
})) ;
}) ;
$(".testimonials_readmore").one("click", function() {
var $this = $(this) ;
$this.prevUntil("li:visible").removeClass("hide") ;
$this.remove() ;
}) ;
</script>
</body>
</html>
|
Цитата:
|
danik.js,
body сложно запихать в ul, если вы знаите способ хотелось бы взглянуть. |
| Часовой пояс GMT +3, время: 21:40. |