Скрываем лишнее на JavaScript (минимизация строк)

Как скрыть информацию со страницы сайта, если она занимает больше нужного кол-ва строк.

Такая же реализация на jQuery.

Для этого мы воспользуемся JS функцией Array.prototype.slice.call().

Метод slice(), который мы при этом используем вернёт новый массив содержащий копию части исходного.

Есть похожий метод в более коротком варианте: Array.from(), но он на данный момент поддерживается не всеми браузерами. Поэтому лучше использовать Array.prototype.slice.call().

С помощью Array.prototype.slice.call() отрежем часть от предыдущего массива.

// Поместим все строки в переменную lines
var lines = block.querySelectorAll('.line');

// Посчитаем длину строк
var len = lines.length;

// Если строк больше 3, то отрежем лишнее и поместим в новую переменную.
if (len > 3) {
    lines = Array.prototype.slice.call(lines);
    lines = lines.slice(3);

    // Для каждого лишнего элемента добавим класс, который его скроет.
    lines.forEach(function(el) {
        el.classList.add('hidden');
    });

    // Покажем ссылку, если нужно чтобы по ней раскрывался список скрытых элементов:
    link.classList.toggle('hidden');
}

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "Скрываем лишнее на JavaScript (минимизация строк)"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>