0xD34F

Ну типа вот.

const parent = document.querySelector('.box').parentNode;
const elems = Array.prototype.slice.call(parent.children, 2, 5);
const wrapper = document.createElement('div');

parent.insertBefore(wrapper, elems[0]);
wrapper.classList.add('wrapper');
wrapper.append(...elems);

Что значит "не промисы, а async/await"? - async/await это тоже промисы.

Используйте await Promise.all, например:

const result = await Promise.all([ 1, 2, 3 ].map((n, i) => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`timeout #${i}`);
      resolve(n * 10);
    }, Math.random() * 3000 | 0);
  });
}));

console.log('result:', result);

не оборачиваются

Вообще-то, оборачиваются. Только после вы ничего с этими элементами не делаете. Ну и вместо wrap следует использовать wrapAll, чтобы у элементов оказался общий родитель, а не отдельный для каждого.

$('.list').find('li:gt(2)').hide();
// или
$('li:gt(2)', '.list').hide();
// или
$('.list li:nth-child(3)').nextAll().hide();
// или
$('.list li:nth-child(n + 4)').hide();
// или
$('.list li').next().next().next().hide();
// или
$('.list > + + +').hide();

Или, к чёрту jquery:

Array
  .from(document.querySelectorAll('.list'))
  .flatMap(n => [...n.children].slice(3))
  .forEach(n => n.hidden = true);

// или (тут надо будет стиль добавить: .hidden { display: none; })

[].forEach.call(document.getElementsByClassName('list'), n => {
  [].forEach.call(n.getElementsByTagName('li'), (m, i) => {
    m.classList.toggle('hidden', i > 2);
  });
});

Если подобное надо выполнять неоднократно, а селекторы и количество элементов, оставляемых видимыми, разнятся, то можно и функцию сообразить (чтобы можно было делать так, например: hide('.list', 'li', 3);):

function hide(containerSelector, elementSelector, hideFrom) {
  $(containerSelector).each((i, n) => {
    $(elementSelector, n).slice(hideFrom).hide();
  });
}

// или

function hide(containerSelector, elementSelector, hideFrom) {
  for (const n of document.querySelectorAll(containerSelector)) {
    const elements = n.querySelectorAll(elementSelector);
    for (let i = hideFrom; i < elements.length; i++) {
      elements[i].style.display = 'none';
    }
  }
}

add() {
  const clone = this.clone.cloneNode(true);
  clone.classList.add(`new${this.index++}`);
  this.wrap.insertBefore(clone, this.beforeInsert);
}

Вместо .filter-values класс лучше переключать у их самых дальних не общих предков, т.е., у .material-block. В этом случае не надо искать внутри контейнера элемент, у которого должен быть переключен класс, а если в будущем захотите внутри открытого .material-block стилизовать ещё какой-то элемент, то не придётся переписывать js-код.

Так что стили немного поправим:

- .material-block .filter-values.open {
+ .material-block.open .filter-values {

У кого надо переключать класс, по клику на какой элемент внутри надо переключать класс, что за класс:

const containerSelector = '.material-block';
const buttonSelector = `${containerSelector} .catalog-filter-block-title`;
const activeClass = 'open';

Вот jquery, как вы и хотели:

$(document).on('click', ({ target: t }) => {
  const $container = $(t).closest(containerSelector);
  const $button = $(t).closest(buttonSelector);

  if ($button.length) {
    $container.toggleClass(activeClass);
  }

  $(containerSelector).not($container).removeClass(activeClass);
});

Или, к чёрту jquery:

document.addEventListener('click', ({ target: t }) => {
  const container = t.closest(containerSelector);
  const button = t.closest(buttonSelector);

  if (button) {
    container.classList.toggle(activeClass);
  }

  document.querySelectorAll(containerSelector).forEach(n => {
    if (n !== container) {
      n.classList.remove(activeClass);
    }
  });
});

Во-первых - вы пытаетесь работать с элементами, которых нет (это я про .expanded). Гуглите "делегирование".

Во-вторых - поскольку в разные моменты времени поведение должно быть разным, click(false) не годится в качестве отмены действия по умолчанию - надо сделать нормальный обработчик, в котором выполнять preventDefault. Типа так (ну или тоже через делегирование, но это как-то глупо будет выглядеть - два обработчика одного события, хотя мог бы быть и один).

$('.break-word').html((i, html) => {
  const [ a, b, c ] = html.split(' ');
  return `${a} ${b}<br>${c}`;
});

или

document.querySelectorAll('.break-word').forEach(n => {
  n.innerHTML = n.innerText.replace(/(.+ .+) /, '$1<br>');
});

почему-то не отрабатывает ни один из хуков

Вот ведь чудеса какие. А может эти хуки, ну они, как бы это сказать... это самое... А ВДРУГ ИХ НЕТ??!

Идём на гитхаб, смотрим чо как - действительно, нет. И нет давно - с февраля позапрошлого года. Там же, на гитхабе, смотрим актуальную версию API. Если я правильно понял - то, что вам нужно называется onHasTask. Исправляем код, и...

Object.entries(comments).reduce((acc, [ k, v ]) => v.parent === null ? { ...acc, [k]: v } : acc, {})

или

Object.values(comments).reduce((acc, n) => (n.parent === null && (acc[n.id] = n), acc), {})

<button class="click-count">click me</button>
<button class="click-count">click me</button>
<button class="click-count">click me</button>

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('click-count')) {
    t.innerText = (t.innerText | 0) + 1;
  }
});

// или

const onClick = e => e.target.textContent = -~e.target.textContent;
document.querySelectorAll('.click-count').forEach(n => n.addEventListener('click', onClick));

Есть 3 блока, которые хранятся в массиве
let block = document.querySelectorAll(".block");

NodeList - это не массив.

const index = Array.prototype.indexOf.call(block, e.target);

или

const index = [...block].findIndex(n => n === e.target);

или

let index = block.length;
while (index-- > 0 && block[index] !== e.target) ;

$('blockquote').html((i, html) => html.replace(/(©)(.*)$/, '$1<cite>$2</cite>'));

или

const el = document.querySelector('blockquote');
const html = el.innerHTML;
const index = html.indexOf('©') + 1;
el.innerHTML = `${html.slice(0, index)}<cite>${html.slice(index)}</cite>`;

или

const el = document.querySelector('blockquote');
el.innerHTML = el.innerHTML
  .split('©')
  .map((n, i) => i ? '<cite>' + n + '</cite>' : n)
  .join('©');

выдаёт неправильную дату

А чем она неправильна? Я бы предположил, что проблема здесь:

let ts = 1539338750;

Какое-то подозрительно небольшое число. Порядка так на три меньше, чем надо - если речь идёт о датах околосегодняшних. Может, вы секунды и миллисекунды перепутали?

Смысл тут такой - не надо считать повторно то, что вы уже считали. А именно - все эти суммы степеней и сами степени. Каждая следующая сумма - это предыдущая сумма плюс ещё одно значение, следующая степень - произведение предыдущей и основания:

function movie(card, ticket, perc) {
  let count = 0;
  let price = ticket;
  let sum = card;

  while (Math.ceil(sum) >= ticket * count) {
    count++;
    price *= perc;
    sum += price;
  }

  return count;
}

Заменить интервал на рекурсивный таймаут:

(function timeout() {
  if (--container.textContent > to) {
    setTimeout(timeout, rand(1000, 4000));
  }
})();

+str.match(/\d+$/).pop()

const arrayToObject = (array) => {
  array.reduce(...

Надо добавить return или убрать фигурные скобки.

{id: '1', content: 'Some stuff'},

obj[item._id] = item

Почему в первом случае у id подчёркивания нет, а во втором есть? - ведь это один и тот же id, вроде как.

как лучше решить задачу преобразования массива в такой объект?

Давайте решим задачу в более общем виде, пусть ключами будут не обязательно id, а произвольные значения - добавим второй параметр, функцию, которая принимает элемент массива и возвращает ключ, под которым данный элемент будет записан в объект:

const arrToObj = (arr, key) => arr.reduce((acc, n) => (acc[key(n)] = n, acc), {});

const obj = arrToObj(arr, n => n.id);

const $video = $('.video');
const $links = $('.video-links a').on('click', function(e) {
  const href = $links
    .removeClass('active')
    .filter(e.target)
    .addClass('active')
    .attr('href');

  $video
    .addClass('video-off')
    .filter(href)
    .removeClass('video-off');
});