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

Question

[AleksandrMurkup]

Всем привет.
У меня задача: Выводить определенное количество символов в тексте. У меня это получилось. Но проблема в том, что у меня есть 4 блока с текстом и почему-то текст первого блока дублируется в остальных. Чтобы не быть голословным, вот то, что я сделал https://jsfiddle.net/v74w8t6w/

Answer 1

[Андрей Б.]

.each()

Answer 2

[Андрей Александрович]

Используйте .each()
Поправил ваш код, теперь работает все верно.
https://jsfiddle.net/v74w8t6w/2/

Answer 3

[Сергей Соколов]

Использовать 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 …

Answer 4

[profesor08]

Зачем тут лишний код 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>'
  }
});