0xD34F

function createTree(arr, idKey, parentKey) {
  const tree = {};
  arr.forEach(n => tree[n[idKey]] = Object.assign({}, n));

  return Object.values(tree).reduce((acc, n) => {
    const parent = tree[n[parentKey]];
    (parent ? parent.children = parent.children || {} : acc)[n[idKey]] = n;
    return acc;
  }, {});
}


const tree = createTree(data, 'id', 'parent_id');

.size-otherBtn {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "mSize lSize xlSize xxlSize"
    "sizeGuide sizeGuide shopNow shopNow";
}

$teacherID = чему-то там равен, неважно...

$itemsByTeacherID = [];
foreach ($days as $day) {
  foreach ($day['day_items'] as $item) {
    if ($item['teacher'] === $teacherID) {
      $itemsByTeacherID[$day['day']][] = $item;
    }
  }
}

$('input').on('focus blur', function(e) {
  $(this).toggleClass('active', e.type === 'focus');
});

или

const onFocus = e => e.target.classList.toggle('active', e.type === 'focus');

document.querySelectorAll('input').forEach(n => {
  n.addEventListener('focus', onFocus);
  n.addEventListener('blur', onFocus);
});

А вообще - надо ли добавлять какие-то классы? Есть же :focus.

Можно попробовать запоминать при добавлении индекс нового элемента и использовать его при создании datepicker'а. Как-то так.

Ну и конечно вы правы - лучше сделать компонент. Например, так.

$brands = array_filter($brands, function($n) {
  return isset($n['alias']);
});

Имена компонентов сложить в массив; также добавить свойство, содержащее имя выбранного компонента:

data: () => ({
  activeComponent: null,
  components: [
    { name: 'component-1', label: '#1' },
    { name: 'component-2', label: 'а я второй' },
    { name: 'component-3', label: 'третьим буду' },
  ],
}),

На основе массива создать выпадающий список, привязать имя выбранного компонента к списку через v-model:

<select v-model="activeComponent">
  <option v-for="n in components" :value="n.name">{{ n.label }}</option>
</select>

Если имя компонента выбрано - создать соответствующий экземпляр:

<component v-if="activeComponent" :is="activeComponent"></component>

Ну, наверное, в data должен быть массив объектов, описывающих блоки. Вместо логического значения активности следует работать с номером активного блока. А чтобы вручную не писать разметку каждого блока, использовать v-for. Как-то так.

document.querySelector('table').addEventListener('input', function(e) {
  e.target.style.backgroundColor = 
    e.target.innerHTML имеет какое надо значение
      ? 'lime'
      : 'red';
});

Ссылку на добавляемый объект запоминаете, после получения ответа обновляете в нём данные. Примерно так (вместо аякса setTimeout, но, думаю, принцип понятен).

А что за ошибка-то?

В main.js должно быть так:

import lightbox from 'vlightbox'
Vue.use(lightbox)

Указывать lightbox в components не нужно.

В App.vue импортируете card, указываете его в components.

В Card.vue в data должен быть определён массив images с данными картинок.

Так?

У каждого блока должен быть свой isShow. Массив, описывающий блоки, кладёте в data, обрабатываете его с помощью v-for. Типа так.

Битовые операции. Как-то так:

short int x = 0x6543;
char a = x & 0xff;
char b = (x & 0xff00) >> 8;

добавьте хедеру margin: 0 auto;

function toggleSubmenu() {
  const submenu = this.closest('li').querySelector('.rz-child-menu');
  submenu.classList.toggle('opened');
}

const vvOpen = document.querySelectorAll('.rz-open-menu-element');
vvOpen.forEach(n => n.addEventListener('click', toggleSubmenu));

.rz-left-menu ul li ul.rz-child-menu.opened {
  display: block;
}

или, вместо назначения обработчика клика каждому элементу индивидуально, можно применить делегированние:

document.querySelector('.rz-left-menu').addEventListener('click', function(e) {
  if (e.target.classList.contains('rz-open-menu-element')) {
    e.target.closest('li').querySelector('.rz-child-menu').classList.toggle('opened');
  }
});

Задавать тип обрабатываемого события надо явно, так что способа легко и просто сделать то, что вы хотите, нет.

Можно подготовить список типов событий заранее и повесить общий обработчик:

const events = [ 'mousemove', 'mouseleave', 'mousedown', ... ];

$element.on(events.join(' '), function(e) { ... })

Или попробовать собрать имена типов событий, перебирая DOM-свойства элемента - имена обработчиков выглядят как "on<тип события>":

const events = [];
for (const k in element) {
  if (k.indexOf('on') === 0) {
    events.push(k.slice(2));
  }
}

$(element).on(events.join(' '), function(e) {
  console.log(e.type);
});

Объявите счётчик цикла с помощью let вместо var - тогда closeBtn[i] будет таким, как вам надо.

Или, обращайтесь к кликнутому элементу через объект события:

for (const n of document.querySelectorAll('.closebtn')) {
  n.addEventListener('click', onClick);
}

function onClick(e) {
  const parent = e.currentTarget.parentNode;
  // ...
}

Правильно - никак. Обрабатываем только движение, а информацию о нажатых кнопках берём из объекта события:

wrap.on('mousemove', function(e) {
  if (!e.buttons) {
    return;
  }

  // здесь ваш код
});

Сейчас у вас checkTimerId и sendTimerId существуют в единственных экземплярах - одни на все элементы, содержащиеся в наборе, на который ссылается this в trackCoords. События, по которым устанавливаются/снимаются интервалы всплывают, а элементы вложены один в другой - так что когда курсор уходит с внешнего элемента на внутренний, то сначала снимаются интервалы внешнего элемента, затем устанавливаются интервалы внутреннего элемента, затем событие mouseover, случившееся на внутреннем элементе достигает внешнего, и там опять устанавливаются интервалы, при этом идентификаторы интервалов внутреннего элемента затираются, после чего снять их уже нельзя.

Так что, во-первых, элементы надо обрабатывать независимо:

$.fn.trackCoords = function(options) {
  return this.each(function() {
    const $element = $(this);
    // ...
  });
};

Во-вторых, не надо на одних элементах обрабатывать события, которые приходят от других - останавливайте всплытие событий, или проверяйте, откуда пришло событие, сравнивая целевой элемент с тем, к которому прицеплен обработчик:

$element.mouseover(function(e) {
  if (this !== e.target) {
    // чужое событие - не интересно, не обрабатываем
    return;
  }
 
  // ...
});

Кроме того, устанавливать обработчик события mousemove внутри обработчика mouseover - сомнительная затея. При каждом наведении курсора на элемент устанавливается новый обработчик, зачем это? Установите его один раз, там же, где устанавливаются обработчики mouseover/mouseout.