@AleksandrMurkup

Как правильно вывести определенное количество символов JQuery?

Всем привет.
У меня задача: Выводить определенное количество символов в тексте. У меня это получилось. Но проблема в том, что у меня есть 4 блока с текстом и почему-то текст первого блока дублируется в остальных. Чтобы не быть голословным, вот то, что я сделал https://jsfiddle.net/v74w8t6w/
  • Вопрос задан
  • 1348 просмотров
Решения вопроса 4
andykov
@andykov
Shit happens
Ответ написан
Комментировать
KaSeo
@KaSeo
Front-end разработчик
Используйте .each()
Поправил ваш код, теперь работает все верно.
https://jsfiddle.net/v74w8t6w/2/
Ответ написан
Комментировать
sergiks
@sergiks Куратор тега JavaScript
♬♬
Использовать jQuery.each() (фиддл)
var size = 30, blogContent = $('.block p');
	blogContent.each(function(e){
	  var $el = $(this), html = $el.html();
		if( html.length > size) html = html.slice(0,size) + '&hellip;<a href="#" class="read-more-button">read more</a>';
		$el.html(html);
	});


Но вообще это так-себе затея, т.к. может ломаться разметка – например, отгрызаться незакрытый тег.

По-хорошему, надо либо убрать все теги, используя вместо .html() – .text(), либо ограничивать длину, урезая только содержание текстовых нод.

p.s. вместо троеточия используйте html-entity &hellip;
Ответ написан
Комментировать
profesor08
@profesor08 Куратор тега JavaScript
Зачем тут лишний код Jquery - непонятно..

let blocks = document.querySelectorAll(".block p");
let size = 50;

[].forEach.call(blocks, block =>
{
	if (block.innerHTML.length > size)
  {
  	block.innerHTML = block.innerHTML.substr(0, size);
    block.innerHTML += '... <a href="#" class="read-more-button">read more</a>'
  }
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы