Айнур Ярулин

Вот так можно сделать и оно будет работать на любой ширине экрана.

word-spacing: 100vw

как вариант можно так

Например,

while (users.length) {
    let part = users.splice(0, 3);
    // что-то делаем с part
}

:nth-child(-n+5)

Псевдокласс :nth-child

:nth-child(1),
:nth-child(2),
:nth-child(3),
:nth-child(4),
:nth-child(5) {
}

[1, 2, 3, 4, 5].sort((a, b) => b % 2 - a % 2 || (a % 2 ? b - a : a - b))

Данные - вместо объекта сделайте массив, так будет проще работать.

Когда данные получили - сохраните их (ну типа переменная какая-то, чтобы они у вас всегда были под рукой).

Сделайте функцию, которая будет выводить список товаров - но не весь, а те, что ей будут переданы.

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

На блок с фильтрами вешаете функцию фильтрации в качестве обработчика событий, возникающих после взаимодействия пользователя с фильтрами.

Всё.

То что вам нужно - insertBefore (MDN)

<section class="wrapper">
   <div class="item">Блок 1</div>
   <div class="item">Блок 2</div>
   <div class="item">Блок 3</div>
   <div class="item">Блок 4</div>
   <div class="item">Блок 5</div>
</section>

var itemListParent = document.querySelector('.wrapper');
var itemList = document.querySelectorAll('.item');

// сработает как appendChild (т.к. второй аргумент null) - поместит второй элемент в конец родительского.
itemListParent.insertBefore(itemList[1], null);

// сработает как того предполагает insertBefore() - вставит пятый элемент перед первым
itemListParent.insertBefore(itemList[4], itemList[0]);

Плюс применения insertBefore (или appendChild) в том, что прикрепленные слушатели к элементу не сотрутся как в случае использования innerHTML.

В самом простом варианте, выбрать по классу коллекцию и с помощью индексации обменять значения элементов которые попадают под задачу, например так:

const items = document.getElementsByClassName("item");

const tmp = items[0].innerHTML;

items[0].innerHTML = items[4].innerHTML;

items[4].innerHTML = tmp;

Для полноты, ещё необходимо условие, чтобы убедиться наверняка, что такие элементы существуют, профит.

P.S. Если у вас есть события привязанные к элементам, то рациональнее заюзать - innerText или textContent

data-popup-id=""
Так валидно
https://developer.mozilla.org/ru/docs/Web/Guide/HT...

Как-то так можно

$(document).on("click", function(e){
	if(!$(e.target).closest("dialog").length)
		$("dialog")[0].close();
});

похоже что нельзя

но можно контент поместить в слой

<dialog class="popup">
  <div class="layer">
    ...
  </div>
<dialog>

а у слоя останавливать всплывающие события => тогда можно отловить клики вне модалки, примерно так:

document.querySelector('.layer').addEventListener('click', (e) => e.stopPropagation());
document.querySelector('.popup').addEventListener('click', (e) => e.target.close());

.button {
  background: red;
  border-color: transparent;
  backgroud-clip: border-box; /* это значение по-умолчанию, можно не указывать, если не меняли */
}

https://developer.mozilla.org/ru/docs/Web/CSS/back...

Slot

Dynamic Imports