0xD34F

Имеется довольно большая матрица (чем больше- тем лучше).
Как правильно отрисовать её на странице?
Хотелось бы еще и с нормальной частотой, хотя-бы раз в 50 ms.

Используйте canvas. При правильном подходе сможете добиться результата на порядок лучше, чем 50 миллисекунд.

не будет ли быстрее преобразовывать матрицу в строку через arr.toString()...

Не будет.

Картинка

Указывать состояния не нужно - цветового обозначения вполне достаточно. Кроме того, при небольших размерах клеток вы эти цифры либо не увидите, либо они не будут влезать в свои клетки (вы представьте, что отрисовываете матрицу хотя бы 300x300).

const index = str.search(/\d\D*$/);

// или

const index = str.replace(/\D*$/, '').length - 1;

// или

const index = [...str].reduce((max, n, i) => +n === +n ? i : max, -1);

// или

const index = +(Object.entries(str).filter(n => !isNaN(n[1])).pop() || [ -1 ])[0];

// или

let index = str.length;
while (--index >= 0 && !'0123456789'.includes(str[index])) ;

Вместо prepend используйте метод html.

Или, если внутри #imgTitle есть ещё какой-то контент, сначала удаляйте предыдущий img:

$('#imgTitle').find('img').remove().end().prepend(...

$('.mod__l').append(function() {
  return ({
    m1: mod__c1,
    m2: mod__c2,
    m3: mod__c3,
  })[$('.mod__input', this).data('mod')];
});

Помогите пожалуйста понять почему следующий код выводит undefined, а не 5

Выводит где? Как вы этот код запускали? Раз уж вы решили скрыть эту информацию...

Ответ номер раз: а чо вы врёте-то? Открываем консоль, копируем код, запускаем и видим, что выводится 5.

Ответ номер два: jsfiddle, например, по умолчанию оборачивает код в window.onload, соответственно, переменная b в window не попадёт - потому и undefined. (UPD. Исправили эту дичь).

Кусок кода, который в этом виноват:

$(document).mouseup(function (e) { 
    var popup = $('#free_moto_lesson');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.overlay').fadeOut();
        $(popup).fadeOut();
    }
    return false;
});

А конкретно - return false.

как сделать, чтобы можно было выбрать максимум 5 дней

Ограничивать максимальную дату конца интервала при изменении начала, и минимальную дату начала при изменении конца. Как-то так.

кстати когда убираю кусок кода, который переводит на русский, все работает

Так форматы дат разные - вот и не получается правильно распарсить.

UPD. Вынесено из комментариев.

А как в таком случае сбросить начальную и конечную дату, если нужно другие числа выбрать?

Можно сбрасывать интервал по клику на отдельную кнопку. Или по повторному клику на границу интервала в соответствующем дейтпикере (по нижней в #from, по верхней в #to; почему не по любой границе в любом - чтобы можно было выставить интервал в один день, иначе будет сбрасываться). Или... думайте.

Где элементы находятся, и индексы тех, что надо получить:

const parentSelector = '.menu';
const indices = [ 0, 1, 4, 8 ];

Получаем:

const $elems = $(parentSelector).children().filter(i => indices.includes(i));

// или

const $elems = $(indices.map(n => `> :eq(${n})`).join(', '), parentSelector);

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

const elems = Array.prototype.filter.call(
  document.querySelector(parentSelector).children,
  (n, i) => indices.includes(i)
);

// или

const elems = document
  .querySelector(parentSelector)
  .querySelectorAll(indices.map(n => `:scope > :nth-child(${n + 1})`));

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let X, Y;

document.addEventListener('mousemove', function(e) {
  X = e.clientX;
  Y = e.clientY;
});

function drawRect(x, y, w, h) {
  const dx = x + w / 2;
  const dy = y + h / 2;
  const angle = Math.atan2(X - dx, Y - dy);

  ctx.save();
  ctx.translate(dx, dy);
  ctx.rotate(-angle);
  ctx.translate(-dx, -dy);
  ctx.strokeRect(x, y, w, h);
  ctx.restore();
}

function draw() {
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  drawRect(50, 50, 50, 50);
  requestAnimationFrame(draw);
}

draw();

Так:

$('body').html(Array.from({ length: 4 }, (n, i) => `
  <svg width="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="border" cx="20" cy="20" r="18"/>
    <circle class="fill" cx="20" cy="20" r="18"/>
    <text x="12" y="25" class="small">0${i + 1}</text>
  </svg>
`));


const $elements = $('.fill');

function animateElem(index) {
  $elements.removeClass('animation').eq(index).addClass('animation');
}

$(document).on('animationend', function(e) {
  $(e.target).removeClass('animation');
  const index = (1 + $elements.index(e.target)) % $elements.length;
  animateElem(index);
});

$(document).on('click', 'svg', function(e) {
  animateElem($elements.index($('.fill', this)));
});

.border {
  fill: transparent;
  stroke: #ccc;
  stroke-width: 2px;
}

.fill {
  fill: transparent;
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transform: rotate(-90deg);
  transform-origin: center;
}

.animation {
  animation: spin 2s both linear;
}

@keyframes spin {
  to {
    stroke-dashoffset: 1;
  }
}

??

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

const parentSelectors = [ '.maplabels', '#map' ];
const activeClass = 'active';

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

$(document).on('click', parentSelectors.map(n => `${n} >`).join(','), e => {
  const index = $(e.currentTarget).index();
  parentSelectors.forEach(n => $(n)
    .children()
    .removeClass(activeClass)
    .eq(index)
    .addClass(activeClass)
  );
});

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

const parents = parentSelectors.map(n => document.querySelector(n));

document.addEventListener('click', ({ target: t }) => {
  const parent = parents.find(n => n !== t && n.contains(t));
  if (parent) {
    const index = [...parent.children].findIndex(n => n.contains(t));
    for (const { children } of parents) {
      for (let i = 0; i < children.length; i++) {
        children[i].classList.toggle(activeClass, i === index);
      }
    }
  }
});

const nestedVal = {
  get(path, root) {
    return path.split('.').reduce((p, c) => p[c], root);
  },
  set(path, root, val) {
    path = path.split('.');
    const key = path.pop();
    nestedVal.get(path.join('.'), root)[key] = val;
  }
};

Градиентом можно сделать.

Ну так и пишите - unix - вместо format:

moment().add(1, 'months').date(10).unix()

Так?

Так?

$(elem).closest('.parent').addClass('active_list')

Потому что в jquery ничего такого нет, это свойство элемента. Которое получить можно так:

$('#text-column').prop('scrollHeight')
// или
$('#text-column').get(0).scrollHeight
// или
$('#text-column')[0].scrollHeight

$('.va-city-list').on('click', '.list-city', function() {
  console.log($(this).data('city'));
});

или

$('.list-city').click(e => console.log($(e.target).attr('data-city')));

или

document.querySelector('.va-city-list').addEventListener('click', e => {
  const { city } = e.target.dataset;
  if (city) {
    console.log(city);
  }
});

или

const onClick = e => console.log(e.target.getAttribute('data-city'));
document.querySelectorAll('.list-city').forEach(n => n.addEventListener('click', onClick));

или

for (const n of document.getElementsByClassName('list-city')) {
  n.onclick = onClick;
}

function onClick() {
  console.log(this.attributes['data-city'].value);
}