0xD34F

При известных размерах поля можно вычислить координаты элемента на основе его индекса:

строка = floor(индекс / количество столбцов)
столбец = индекс % количество столбцов

Ну а при клике надо взять все элементы, чьи координаты отличаются от координат кликнутого элемента не более чем на какое-то определённое значение (в данном случае 2 - т.к. сторона квадрата 5, floor(5 / 2)).

Заценить живьём.

const result = Object.values(arr.reduce((acc, n) => {
  const group = acc[n.id] = acc[n.id] || { id: n.id, offers: [] };
  group.offers.push(n);
  return acc;
}, {}));

Да делайте как вам удобнее.

Лично я в подобной ситуации создал бы отдельную переменную, если это позволило бы повысить читаемость кода - скажем, селектор какой-то особо стрёмный, тогда можно дать переменной имя, из которого станет ясно, что это за элемент. Ну или чтобы разбить слишком длинную строку на две покороче.

moment('10.2018', 'MM.YYYY').locale('ru').format('MMMM')

https://jsfiddle.net/bgn2cko7/

document.querySelectorAll('.num').forEach(n => n.innerText *= 2);

или

for (const n of document.getElementsByClassName('num')) {
  n.textContent *= 2;
}

[].concat(...arr.map(n => Object.keys(n).map(k => ({ [k]: n[k] }))))

или

arr.flatMap(Object.entries).map(([ k, v ]) => ({ [k]: v }))

function createTree(data) {
  const tree = { null: { cat: {} } };

  data.forEach(n => tree[n.id] = { cat: {}, ...n });
  data.forEach(n => tree[n.parent].cat[n.name] = tree[n.id]);

  return tree.null.cat;
}

Режете исходный текст на куски, по очереди заменяете их при выходе текста за границу экрана. Как-то так.

$('#accordion').accordion({
  collapsible: true,
  beforeActivate(e, ui) {
    ui.oldHeader.find('[type="checkbox"]').prop('checked', false);
    ui.newHeader.find('[type="checkbox"]').prop('checked', true);
  },
});

Назначайте в качестве обработчика функцию с привязанным контекстом. Создавайте её прямо в конструкторе, берёте метод из прототипа и под тем же именем создаёте свойство у экземпляра класса:

constructor(initObj) {
  this._keysListen = this._keysListen.bind(this);
  ...

Зачем регулярные выражения? С результатом запроса можно работать так же, как и с обычным DOM-деревом:

success(data) {
  document.querySelector('#result').innerHTML = Array
    .from(data.querySelectorAll('info'), n => `<div>${n.firstChild.nodeValue}</div>`)
    .join('');
},

Хотя, конечно, дурацкое дело нехитрое:

document.getElementById('result').innerHTML = (xml
  .match(/<info><!\[CDATA\[[^\]]*/g) || [])
  .map(n => '<div>' + n.slice(15) + '</div>')
  .join('');

Открываем спецификацию, смотрим как выполняется сдвиг. Особое внимание на пункт седьмой:

Let shiftCount be the result of masking out all but the least significant 5 bits of rnum, that is, compute rnum & 0x1F.

К размеру сдвига применяется битовая маска, обнуляющая все двоичные разряды, кроме младших пяти. Т.е., сдвиг на 32, 64, 128 и т.д. - это сдвиг на 0.

isNaN (строковые представления двоичных/восьмеричных/шестнадцатеричных чисел - "0b101"/"0o777"/"0xFF", например - будут сочтены числами)

или /^\d+$/.test(str)

или !str.replace(/\d/g, '')

или `${+str}` === str

например

const obj = (str
  .match(/\w+=[\d;]+/g) || [])
  .reduce((acc, n) => {
    const [ key, values ] = n.split('=');
    acc[key] = values.split(';').map(Number);
    return acc;
  }, {});

или

const obj = Array
  .from(new URL(str).searchParams)
  .reduce((acc, [ k, v ]) => (
    acc[k] = v.split(';').map(n => +n),
    acc
  ), {});

О какие элементах и атрибутах идёт речь:

const elements = document.querySelectorAll('p');
const attrNamePrefix = 'bind:';

Как из общего набора элементов отобрать нужные:

const result = Array.prototype.filter.call(
  elements,
  n => Array.prototype.some.call(
    n.attributes,
    m => m.name.startsWith(attrNamePrefix)
  )
);

или

const result = [];

for (const n of elements) {
  for (const m of n.attributes) {
    if (m.name.indexOf(attrNamePrefix) === 0) {
      result.push(n);
      break;
    }
  }
}

Во-первых - ошиблись с именем класса (это вы могли бы и сами обнаружить).

Во-вторых - браузер стремится оптимизировать внесение изменений в DOM-дерево, так что свежесозданные элементы анимироваться не будут. Чтобы анимация выполнилась, нужен дополнительный reflow, для чего можно либо обернуть добавление класса в setTimeout, либо перед добавлением класса обратиться к одному из свойств, расчёт которых вызывает reflow. Как-то так.

<div class="counter">
  <span class="counter__visible"></span> /
  <span class="counter__total"></span>
</div>

$('.loadmore').on('click', function(e) {
  e.preventDefault();

  const $items = $('.item');

  $items.filter(':hidden').slice(0, 4).fadeIn();

  const visible = $items.filter(':visible').length;

  $('.counter__visible').text(visible);
  $('.counter__total').text($items.length);

  if ($items.length === visible) {
    $(this).fadeOut('slow');
  }
}).click();

Заменяем switch на таблицу, где будут перечислены все возможные варианты (в данном случае достаточно простого объекта), после этого вся логика выбора нужного значения сведётся к чтению свойства:

const defineQuestionDataByLanguage = (question, lang) => {
  const answerLang = ({
    2: 'swe',
    // ещё какие-то языки, если надо
  })[lang] || 'en';

  return {
    labelLang: question[answerLang],
    answerLang,
  };
};

После этого табличку с языками можно отделить от функции (вынести в отдельный файл, какой-нибудь languages.json, например), и тогда станет совсем здорово:

const defineQuestionDataByLanguage = (question, lang) => {
  const answerLang = languages[lang] || languages.default;

  return {
    labelLang: question[answerLang],
    answerLang,
  };
};

А ещё при необходимости внести изменения в список языков трогать код будет не надо.