Как изменить содержимое всех найденных элементов на странице с помощью jquery?

Question

[nikkon82]

День добрый!

Как изменить содержимое всех найденных элементов на странице с помощью jquery?

Надо чтобы во всех <div class="dop_atr"> содержимое сокращал до 250 символов и добавлял "...", если содержимое имеет больше символов, чем 250

Нашел в инете вот такой код:

var size_dopatr = 250,
  dopatrContent = $('.dop_atr'),
  dopatrText = dopatrContent.text();
  if (dopatrText.length > size_dopatr) {
     dopatrContent.text(dopatrText.slice(0, size_dopatr) + ' ...');
 }

Но он находит первый и во всех остальных делает замену на то что в первом.

Comments

[Дмитрий Чайников]

Попробуйте этим "getElementsByClassName"
Ознакомиться можно здесь: https://learn.javascript.ru/searching-elements-dom

Answer 1

[0xD34F]

В каких элементах и на сколько надо ограничить длину текста:

const className = 'dop_atr';
const maxlen = 250;

Чтобы все элементы обрабатывались индивидуально, вместо строки можно передавать в метод text функцию - вызывается для каждого элемента набора, принимает текущее текстовое содержимое элемента и возвращает новое:

$(`.${className}`).text((i, text) => {
  return text[maxlen] ? `${text.substring(0, maxlen)}...` : text;
});

Или, можно отказаться от jquery:

for (const n of document.getElementsByClassName(className)) {
  n.innerText = n.innerText.slice(0, maxlen) + (n.innerText.charAt(maxlen) && '...');
}

// или

document.querySelectorAll(`.${className}`).forEach(function(n) {
  n.textContent = n.textContent.replace(this, '$1...');
}, RegExp(`(.{${maxlen}}).+`));

Answer 2

[Алексей Уколов]

var size_dopatr = 250;

$('.dop_atr').each(function () {
  var dopatrContent = $(this);

  dopatrText = dopatrContent.text();

  if (dopatrText.length > size_dopatr) {
     dopatrContent.text(dopatrText.slice(0, size_dopatr) + ' ...');
  }
});

Comments

[nikkon82]

Благодарю

Answer 3

[Владимир Проскурин]

Ваш код легко переделать, нужно лишь выполнить его для каждого элемента, а не только для первого.

var size_dopatr = 250;
var $list = $('.dop_atr');
$list.each(function() {
   var $this = $(this);
   var dopatrText = $this.text();
   if (dopatrText.length > size_dopatr) {
      $this.text(dopatrText.slice(0, size_dopatr) + ' ...');
   }
});

Comments

[nikkon82]

Благодарю